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

floatを使用したまま、2番目の結果を取得するにはどうすればよいですか？

Answer 1

要素に固定幅を指定して、単語を分割する場所がわかるようにします。

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

word-wrap：break-wordプロパティは、要素に視覚的なレンダリングがある場合、明示的な高さ/幅を持つインライン要素である場合、絶対に配置されている場合、および/またはブロック要素である場合にのみ適用する必要があります。