css - 无法在 float 元素内断开连字符上的文本

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>