html - 防止单个单词在 css/html 中环绕 float

Question

有没有什么方法可以防止一个或两个单词环绕在一个 float 周围，但如果有更多文本则允许它？这是一个示例，其中第一个文本有问题，但第二个文本没有问题。

http://jsfiddle.net/wdPCp/

<div class="wrapper">
<img src="http://lorempixel.com/100/100/animals" />
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <span class="last-bit">labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</span></div>
</div>

<div class="wrapper">
<img src="http://lorempixel.com/100/100/animals" />
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span class="last-text">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div>
</div>

CSS:

img {
    float:left;
    margin:10px;
    width:100px;
    height:100px;
}

.wrapper {
    width:300px;
    margin-bottom:20px;
}

.text {
}

.last-text {
}

更新:请注意，我事先并不知道文本将换行的位置 - 我正在寻找一个通用的解决方案(如果存在的话)。例如，“.last-text”的某些样式导致它不在 float 下换行。

CSS/HTML 解决方案优于 JavaScript。

Answer 1

防止单个单词换行很简单:只需在最后两个单词之间使用不间断空格，而不是普通空格(例如，nostrud exercitation)。

但是，恐怕这并不能解决真正的问题。在示例情况下，将有一个两个单词的换行，只剩下最后一行就很短。如果文本变大，即使没有必要，这两个词也会粘在一起。

恐怕这个问题需要一些重要的 JavaScript 代码来分析，在初始格式化之后，文本 block 的高度与图像的高度相比，并根据某些标准改变样式。