CSS:当浮动结束+非换行符问题时，文本转到左侧

Question

我有一个盒子，里面有用户活动。

现在我有两个问题。

第一个是我有一个浮动的left元素，当这个元素结束时，文本也在左边。(issue1)

第二个是，如果你输入一个不间断的单词/句子，比如eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee，它不会打破它，而是允许它向右移动，就像它不听指定的宽度一样。

以下是这两个问题的现场直播：

http://jsfiddle.net/AB4Ls/5/

请帮帮忙，我该如何解决这个问题，为什么会发生这种情况？

Answer 1

对于第一个问题，设置包含要显示为块的文本的元素，并为其提供浮动元素宽度的左边距数量。

display: block;
margin-left: 40px; /* adjust to your needs */

对于第二个问题，请检查这个url：http://perishablepress.com/press/2010/06/01/wrapping-content/解释在这里重复太久了。

Answer 2

你确定你有这么长的词吗？如果是真的，你可以使用css3属性word-wrap或者在显示之前用php解析单词。

Answer 3

我认为你是在说，你希望问题1中的文本不会在你漂浮在左边的图像下回流。

如果是这样，只需用div标记将文本括起来并使用display: table-cell即可。如果你愿意，这将在你的文本周围放置一个“刚性边框”。