6

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

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

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

4

7 回答 7

5

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

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

但是 angular 将不间断的空间打印为字符串，所以我使用了 unicode，它工作得很好：
String.replace(/\s([^\s<]+)\s*$/,'\u00A0$1');

于 2015-10-26T22:37:07.607 回答
4

Adobe 已经站出来，并认为这是网络上的一个严重问题。他们提出了一项建议，以帮助解决寡妇/孤儿和其他文本平衡排版问题。

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

对 w3c 的提案在这里： http ://adobe-webplatform.github.io/balance-text/proposal/index.html

此后，它已被CSS Text Module Level 4 Editor's Draft采用。

于 2014-05-13T22:04:50.937 回答
4

我相信您是在 HTML 文档中描述印刷寡妇？例如，一个单词在标题中换行到新行的位置？

jQuery Widon't 插件会遍历您的HTML 来查找它，并在倒数第二个单词和最后一个单词之间放置一个不间断的空格，以确保至少有两个单词换行。

希望这会有所帮助，卡尔

于 2011-02-09T13:11:34.040 回答
2

有一个名为widowfix的插件，它比接受的答案更具可配置性。

$('h1').widowFix({
    letterLimit: 10,
    prevLimit: 5,
    linkFix: true 
});
于 2014-02-28T11:12:06.923 回答
1

一个原始的 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( ' ' );
}
于 2016-03-14T05:09:51.313 回答
1

这是一个不格式化整个 HTML 的 JQuery 解决方案。它仅使用 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);
  });

于 2018-06-25T11:08:08.703 回答
0 

$('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(" "));
  }
});
#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>

于 2015-02-08T22:42:46.903 回答