javascript - JavaScript避免寡妇

This question already has answers here:

Widow/Orphan Control with JavaScript?

(7个答案)


5年前关闭。




在HTML / CSS中使用排版时，一个常见的问题是瑞典语中的“horunge”(英语中为“widow”)。

是什么:

假设您有一个宽度为200px的框，其文本为“我非常喜欢错字”。现在，文本断开并变为:



作为设计师，我不需要一个 SCSS (单个单词/行)。如果这是一个文档/ PDF等，我会很断言，看起来像这样:



看起来好多了。

我可以用CSS规则还是JavaScript来解决这个问题？规则应该是永远不要让一个单词连续空白。

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

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

最佳答案

如果将“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, " ") )
});

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

关于javascript - JavaScript避免寡妇，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7444656/