Javascript 避免寡妇

在HTML/CSS中使用排版时，一个常见的问题是我们在瑞典语中称之为“horunge”（“英语”）

它是什么：

假设你有一个200像素宽的盒子，上面写着“我非常喜欢打字”。现在，文本将断开并变为：

我非常喜欢字体设计
很多

作为一名设计师，我不想要一个词杂种（单个词/行）。如果这是一个文档/PDF等，我会在很短的时间内打破这个词，看起来像这样：

我喜欢排版
非常

看起来好多了

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

我知道这可以通过添加

来解决，但这不是一个解决动态宽度、提要内容、不同翻译、浏览器字体呈现问题的解决方案

更新（解决方案）

---

我用这个jquery插件解决了我的问题：

还有CSS寡妇和孤儿属性：请参阅

不确定是否支持浏览器

编辑：关于WebKit实现的更多信息，请点击此处：。

我做了一点，在的帮助下找到了行高度

这只是一种方法，可能有效，也可能无效，没有时间进行全面测试

现在，

text\u元素

必须是jQuery对象

function avoidBastardWord( text_element )
{
    var string = text_element.text();
    var parent = text_element.parent();
    var parent_width =  parent.width();
    var parent_height = parent.height();

    // determine how many lines the text is split into
    var lines = parent_height / getLineHeight(text_element.parent()[0]);

    // if the text element width is less than the parent width,
    // there may be a widow
    if ( text_element.width() < parent_width )
    {
        // find the last word of the entire text
        var last_word =  text_element.text().split(' ').pop();

        // remove it from our text, creating a temporary string
        var temp_string = string.substring( 0, string.length - last_word.length - 1);

        // set the new one-word-less text string into our element
        text_element.text( temp_string );

        // check lines again with this new text with one word less
        var new_lines = parent.height() / getLineHeight(text_element.parent()[0]); 

        // if now there are less lines, it means that word was a widow
        if ( new_lines != lines )
        {
            // separate each word
            temp_string = string.split(' ');

            // put a space before the second word from the last
            // (the one before the widow word)
            temp_string[ temp_string.length - 2 ] = '<br>' + temp_string[ temp_string.length - 2 ] ;

            // recreate the string again
            temp_string = temp_string.join(' ');

            // our element html becomes the string
            text_element.html( temp_string );
        }
        else
        {
            // put back the original text into the element
            text_element.text( string );
        }

    }

}

函数avoidBastardWord（文本元素）
{
var string=text_element.text（）；
var parent=text_element.parent（）；
var parent_width=parent.width（）；
var parent_height=parent.height（）；
//确定文本拆分为多少行
var lines=parent_height/getLineHeight（text_element.parent（）[0]）；
//如果文本元素宽度小于父元素宽度，
//可能有个寡妇
if（text\u element.width（）

不同的浏览器有不同的字体设置。试着玩一点，看看有什么不同。我在IE8和Opera上测试了它，每次都修改了字符串，它似乎工作正常

我希望听到一些反馈并加以改进，因为我认为它可能会派上用场

---

玩吧！：）

手动，您可以用

---

我一直在寻找动态添加它的方法。我找到了一些，但我自己没能成功

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

例如：

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

---

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

只想添加到此页面，因为它对我帮助很大

如果你有（寡妇）实际上应该是孤儿，因为寡妇是下一页上的单个单词，而不是新行上的单个单词

使用像“N12 5GG”这样的邮政编码将导致完整的邮政编码一起出现在一个新的行上，但仍然被归类为孤儿，所以解决方法是这样的。（将类更改为“noWidow2”，以便可以同时使用这两个版本

123 Some_路，Some_镇，N12 5GG

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

这将导致最后3个空格一起出现在新行上，从而使邮政编码问题得以解决

最终结果

123 Some_road,
Some_town, N12 5GG

$（'span'）。每个（函数（）{
var w=this.textContent.split（“”）；
如果（w.长度>1）{
w[w.length-2]+=''+w[w.length-1]；
w、 pop（）；
this.innerHTML=（w.join（“”）；
}
})；

#foo{
宽度：124px；
边框：1px实心#ccc；
}

你好，我有一根绳子真的很长，我想知道我有多少行

这两个工具只适用于打印@c69。你说得对。有人知道有没有计划为非页面媒体添加此工具吗？在web上找不到任何东西。如果能看到更多像这样的排版工具（以及flow和runaround），那就太好了为屏幕媒体实现。-有些东西在IE10 pp3中可以使用，也可以在新的WebKit中使用。@c69有关WebKit实现的详细信息，请参见：。这应该与“&n b s p；”（中间没有空格，&不间断空格）一起在两个`符号之间换行代码，以允许正确的格式Widows…Word Burst…我爱瑞典语！：）如果这不会破坏所述元素中的html，那就太好了。这会剥离html中的任何格式，如strong、锚等。这会剥离html中的任何格式，如strong、锚等。

123 Some_road,
Some_town, N12 5GG