防止单个单词在css / html中浮动(Prevent single word from wrapping around float in css/html)

防止单个单词在css / html中浮动(Prevent single word from wrapping around float in css/html)

有什么办法可以防止一个单词或两个单词缠绕在一个浮点上，但是如果有更多的文本则允许它？ 这是第一个文本有问题的例子，但第二个文本没问题。

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。

Is there any way to prevent a single word or two from wrapping around a float, but allow it if there is more text? Here is an example where the first text is problematic, but the second text is fine.

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

Update: Note that I don't know in advance where the text will wrap - I'm looking for a general solution, if it exists. For example, some style for ".last-text" that causes it to not wrap under a float.

CSS/HTML solutions are preferable over JavaScript.

最满意答案

防止单词换行很简单：只在最后两个单词之间使用一个nostrud&nbsp;exercitation空格，而不是正常的空格（例如， nostrud&nbsp;exercitation ）。

但是，恐怕这并不能解决真正的问题。 在示例中，会有两个字换行，最后只剩下一行。 如果文字变得更大，即使没有必要，这两个词也会粘在一起。

恐怕这个问题需要一些非平凡的JavaScript代码，它们在初始格式化之后分析文本块的高度，并与图像的高度进行比较，并根据某些标准更改样式。

Preventing single-word wrapping is easy: just use a no-break space between the last two words, instead of a normal space (e.g., nostrud&nbsp;exercitation).

However, I’m afraid this would not solve the real problem. In the sample case, there would be a two-word wrap, leaving the last but one line short. And if text gets larger, the two words would stick together even when there is no need for that.

I’m afraid that problem would need some nontrivial JavaScript code that analyzes, after initial formatting, the height of the text block as compared with the height of the image and changes styling by some criteria.