Невозможно разбить текст на дефис в плавающем элементе

Question

На следующем рисунке показано, как я хотел бы, чтобы набор вложенных элементов отображался.

Однако элементы на самом деле выглядят так. ..

Я пытался установить различные параметры overflow и white-space, но не могу добиться того, на что надеюсь. Мое лучшее предположение заключается в том, что float приводит к тому, что синий элемент не имеет ширины, и, следовательно, нет причин нарушать текст.

Как я могу это исправить?

Answer 1

Если фамилия человека длинная без пробелов, то элемент с синей рамкой не может соответствовать тому же уровню, что и левый элемент.

Чтобы элемент с синей рамкой соответствовал тому же уровню, что и левый элементВы должны дать ему некоторую ширину и свойство разрыва слова.

<div style="width:25%;background:#ccc;float:left;word-break:break-word">
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div style="width:74%;background:#ccc;float:left;margin-left:1%;word-break:break-word">
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>