防止单个词在css / html中环绕浮动

有没有办法阻止一个或两个单词包围浮动,但如果有更多的文本允许它？这是第一个文本有问题的示例,但第二个文本很好.

http://jsfiddle.net/wdPCp/

odo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 

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.

最佳答案

防止单词包装很容易：只需在最后两个单词之间使用不间断空格,而不是正常空格(例如,nostrud& nbsp; exercitation).

但是,我担心这不会解决真正的问题.在示例的情况下,将有一个双字包装,留下最后但一行短.如果文字变大,即使没有必要,这两个词也会粘在一起.

我担心这个问题需要一些非常重要的JavaScript代码,在初始格式化之后,将文本块的高度与图像的高度进行分析,并按照某些标准更改样式.