Question

它可以是库依赖的或 - 不可知的。我只是想知道是否存在一个脚本来分析页面（或者可能是某些节点已被给出）和......“保护”文本中的寡妇和孤儿。

“保护”是什么意思？我不知道。我考虑过看看自己是否可以拿出一个，但部分问题是我甚至不确定如何去做。

澄清：这适用于网站的屏幕版本，而不是打印。

Answer 1

我最近在我的角应用程序中遇到了这个问题并使用了this post上找到的一些正则表达式在最后一个单词之前添加了一个不间断的空格：

String.replace(/\s([^\s<]+)\s*$/,\'&nbsp\;$1');

但是角度将不间断的空间打印成一个字符串，所以我使用了unicode，效果很好：
String.replace(/\s([^\s<]+)\s*$/,'\u00A0$1');

Answer 2

我相信你在描述HTML文档中的排版寡妇？单个单词是否包含在标题中的新行上，例如？

jQuery Widon't plugin通过你的HTML查找，并在倒数第二个和最后一个单词之间放置一个不间断的空格，以确保至少有两个单词换行到新行。

希望这有帮助，卡尔

Answer 3

Adobe已经加强并决定这是一个严重的网络问题。他们提出了一项建议，以帮助修复寡妇/孤儿和其他文本平衡排版问题。

他们的jQuery插件的存储库在这里： https://github.com/adobe-webplatform/balance-text

向w3c提出的建议如下： http://adobe-webplatform.github.io/balance-text/proposal/index.html

Answer 4

有一个名为widowfix的插件比可接受的答案更容易配置。

$('h1').widowFix({
    letterLimit: 10,
    prevLimit: 5,
    linkFix: true 
});

Answer 5

＆＃13;

$('span').each(function() {
  var w = this.textContent.split(" ");
  if (w.length > 1) {
    w[w.length - 2] += "&nbsp;" + w[w.length - 1];
    w.pop();
    this.innerHTML = (w.join(" "));
  }
});

＆＃13;

#foo {
  width: 124px;
  border: 1px solid #ccc;
}

＆＃13;

<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>

＆＃13;

Answer 6

一个vanilla JavaScript解决方案，最初发布于CSS Tricks：

var headings = document.getElementsByTagName( 'h1' );
for ( var i=0; i<headings.length; i++ ) {
  var h1s = headings[i].innerHTML.split( ' ' );
  h1s[h1s.length-2] += "&nbsp;" + h1s[h1s.length-1];
  h1s.pop();
  headings[i].innerHTML = h1s.join( ' ' );
}

Answer 7

这是一个JQuery解决方案，它不格式化整个HTML。它仅使用DOM节点树中的文本节点（节点类型3）。当您不想丢失副本中可能包含的HTTP地址或电子邮件链接（节点类型1）等元素的功能时，此功能很有用。上面的解决方案以格式化文本的方式来去除HTML中的所有内容，以便重新构建文本。

$(".no-widows").each(function () {
    const parent = $(this);
    const textNode = parent.contents().filter(function () {return this.nodeType === 3;}).last();
    const text = textNode.text().trim();
    const lastSpace = text.lastIndexOf(" ");
    const newText = text.substr(0, lastSpace) + "&nbsp;" + text.substr(lastSpace+1);
    textNode.replaceWith(newText);
  });

使用JavaScript进行寡妇/孤儿控制？

7 个答案: