在 HTML/CSS 中处理排版时常见的问题是我们在瑞典称之为“horunge”（在英语中称为“widow”）。
它是什么：
假设你有一个宽度为 200px 的盒子，里面写着“我非常喜欢排版”。现在文字折行变成了：
我非常喜欢
排版
作为设计师，我不想要一个孤立的单词出现在一行上。如果这是一个文件/PDF 等等，我会在 very 前面断开单词，效果如下：
我非常喜欢
排版
看起来更好。
我能用 CSS 规则或 JavaScript 来解决这个问题吗？规则应该是不让一个单词空在一行上。
我知道可以通过添加 <br /> 来解决，但这不适用于动态宽度、提供的内容、不同的翻译、浏览器字体渲染问题等。
更新（解决方案） 我使用了这个 jQuery 插件来解决我的问题：http://matthewlein.com/widowfix/
例如：
<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, " ") )
});
这个方法使用正则表达式来查找并替换字符串中的最后一个空格为不间断字符。这意味着最后两个单词将被强制放在同一行上。如果行末有空间，这是一个很好的解决方案，因为这可能导致文字超出具有固定宽度的元素范围，或者如果没有固定宽度，会导致元素变得更大。
我想补充这个页面，因为它对我有很大帮助。
如果你有孤行问题，实际上应该是“孤儿”问题，因为孤行是单词落在下一页，而不是新行的单词。
处理邮编如“N12 5GG”将导致完整邮编出现在新行，但仍被视为孤行，因此可以使用以下解决方法（将类更改为“noWidow2”，以便您可以使用两个版本）。
123 Some_road，Some_town，N12 5GG
$('.noWidows2').each(function(i,d){
var value=" "
$(d).html($(d).text().replace(/\s(?=[^\s]*$)/g, value).replace(/\s(?=[^\s]*$)/g, value));
});
123 Some_road,
Some_town, N12 5GG
text_element必须是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 );
}
}
}
$('span').each(function() {
var w = this.textContent.split(" ");
if (w.length > 1) {
w[w.length - 2] += " " + w[w.length - 1];
w.pop();
this.innerHTML = (w.join(" "));
}
});#foo {
width: 124px;
border: 1px solid #ccc;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<span class="orphan">hello there I am a string really really long, I wonder how many lines I have</span>
</div>手动地，你可以用 替换中间的空格。
我一直在寻找动态添加它的方法。我找到了一些，但自己还没有成功实现。
还有CSS的widows和orphans属性：请参见about.com文章。
不确定浏览器是否支持...
编辑：关于WebKit实现的更多信息在这里：https://bugs.webkit.org/buglist.cgi?quicksearch=orphans。