$("h2").each(function() {
var wordArray = $(this).text().split(" ");
var finalTitle = "";
for (i=0;i<=wordArray.length-1;i++) {
finalTitle += wordArray[i];
if (i == (wordArray.length-2)) {
finalTitle += " ";
} else {
finalTitle += " ";
}
}
$(this).html(finalTitle);
});
将此
新屏幕录像:TypeKit 的前十分钟
转换为
新屏幕录像:TypeKit 的前十分钟
您实际上可以在没有内部循环的情况下执行此操作,如下所示
$("*").each(function(){
var content,widow;
content = $(this).text().split(" ");
widow = " "+content.pop();
$(this).html(content.join(" ")+widow);
});
有什么意义?
James,在印刷排版(杂志、书籍等)中,将单个单词单独放在一段的最后一行被认为是不好的风格,尤其是在跨列和跨页的情况下。在网络上,它才刚刚开始使用 css 解决。
http://reference.sitepoint.com/css/orphans
如果在<h2>内有<a>,则应将.text()函数更改为.html()函数以获取正确的单词数组。
var wordArray = $(this).html().split(” “);
它并不真正稳定,但有效!
white-space:nowrap
这个主题非常有趣,尤其是在应用于新的流体布局趋势时
我创建了一个 jQuery 插件来简化此操作。此外,它还使您能够仅修复一定数量字母的单词(即,不修复本身看起来不错的长单词)以及其他一些选项。
http://matthewlein.com/widowfix/
我同意 Milovan 的观点,{white-space:nowrap} 可以完成这项工作
但这使得标题根本不会换行。并不是说标题不应该换行,而是我们要确保换行不会发生在最后两个单词之间。
我只是在标题中使用& nbsp;(不换行空格)。这样我就可以控制它将在哪里换行。
不,{white-space:nowrap} 不能完成这项工作。
如果您有 3 行完整的文本加上一个孤儿词,nowrap 属性会将所有文本移到一行很长很长的线上。
另一种方法
不,{white-space:nowrap} 不能完成这项工作。
如果您有 3 行完整的文本加上一个孤儿词,nowrap 属性会将所有文本移到一行很长很长的线上。
所以,为了确保我正确理解……添加不换行空格的原因是为了防止换行发生在最后的一个或两个单词上?
不换行空格填充空隙,以便单词换行将这两个单词视为一个单词?