JavaScript避免寡妇

Question

在HTML/CSS中使用排版时常见的问题是瑞典人称之为"horunge"(英语中的" 寡妇 ").

这是什么:

假设你有一个宽度为200px的盒子,文字"我非常喜欢打字".现在文本中断并变为:

我爱印刷术非常
多

作为一名设计师,我不想要一个单词混蛋(单字/行).如果这是一个文档/ PDF等我会在之前打破这个词,看起来像这样:

我
非常喜欢排版

看起来好多了.

我可以用CSS规则或javascript解决这个问题吗？规则应该是永远不要让一个单词在一行中空着.

我知道它可以通过添加a来解决,<br />但这不是一个适用于动态宽度,提要内容,不同翻译,浏览器字体渲染问题等的解决方案.

更新(解决方案) 我用这个jquery插件解决了我的问题:http://matthewlein.com/widowfix/

Answer 1

如果您将类"noWidows"添加到包含您担心的文本的任何元素的标记中,则简单的jQuery/regrex解决方案可能如下所示.

如:

<p class="noWidows">This is a very important body of text.</p>

然后使用此脚本:

$('.noWidows').each(function(i,d){
   $(d).html( $(d).text().replace(/\s(?=[^\s]*$)/g, " ") )
});

这使用正则表达式来查找和替换字符串中的最后一个空格,并使用非中断字符.这意味着最后两个单词将被强制放在同一行.如果在行尾有空格,这是一个很好的解决方案,因为这可能导致文本在具有固定宽度的元素之外运行,或者如果不是固定的,则会导致元素变大.

Answer 2

还有 CSS 寡妇和孤儿属性：请参阅about.com 文章。

不确定浏览器支持...

编辑：有关 WebKit 实现的更多信息： https: //bugs.webkit.org/buglist.cgi?quicksearch= orphans 。