html - 自动换行不适用于浮动文本

Question

假设我有这个。

<div>
<div id="lala">
lalalala
</div>
</div>

CSS：

#lala
{
   float:left;
   word-wrap:break-word;
}

如果里面的文字#lala很大，它会看起来像这样。

|                              |
|                              |
| lalalalalalalalalalalalalala | lalalalalala <-- these won't be show.
|                              |
|                              |

如果我删除float:left;这将是结果。

|                              |
|                              |
| lalalalalalalalalalalalalala |
| lalalalalala                 |
|                              |

如何在仍然使用浮点数的同时获得第二个结果？

Answer 1

给元素一个固定的宽度，这样我们就知道在哪里断词：

#lala
{
float:left;
word-wrap:break-word;
width:?px;
}

word-wrap:break-word 属性仅适用于元素具有可视化渲染、是具有显式高度/宽度的内联元素、绝对定位和/或块元素的情况。