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

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                 |
|                              |

如何在使用float时获得第二个结果？

Answer 1

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

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

自动换行：break-word属性应仅在元素具有可视化渲染时应用，是具有显式高度/宽度的内联元素，绝对定位和/或是块元素。