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

前端之家收集整理的这篇文章主要介绍了防止单个词在css / html中环绕浮动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

http://jsfiddle.net/wdPCp/

CSS:

  1. img {
  2. float:left;
  3. margin:10px;
  4. width:100px;
  5. height:100px;
  6. }
  7. .wrapper {
  8. width:300px;
  9. margin-bottom:20px;
  10. }
  11. .text {
  12. }
  13. .last-text {
  14. }

更新:请注意,我事先不知道文本将在哪里包装 – 我正在寻找一个通用的解决方案,如果它存在.例如,某些“.last-text”样式导致它不会在float下包装.

CSS / HTML解决方案优于JavaScript.

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

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

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

猜你在找的CSS相关文章