JavaScript的寡婦/孤兒控制？

Question

它可以是庫依賴的或不可知的。我只想知道是否存在可以分析頁面的腳本（或者可能已經給出了某些節點），並且......可以保護文本中的寡婦和孤兒。

「保護」是什麼意思？我不知道。我考慮過是否可以自己想出一個，但問題的一部分是我甚至不確定我會怎麼做。

澄清：這將是對屏幕版本的網站，不能打印。

Answer 1

我相信你在HTML文檔中描述印刷寡婦？例如，單個單詞是否包含在標題的新行中？

jQuery Widon't plugin通過您的HTML尋找這個，並在倒數第二個單詞和最後一個單詞之間放置一個不間斷的空格，以確保至少有兩個單詞換行到新行。

希望這有助於卡爾

Answer 2

有插件叫widowfix比接受的答案更配置了一下。

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

Answer 3

Adob​​e已經加緊並認定這是網絡上的嚴重問題。他們提出了一個幫助解決寡婦/孤兒和其他文字平衡排版問題的建議。

他們的jQuery插件存儲庫是在這裏： https://github.com/adobe-webplatform/balance-text

給W3C的建議是在這裏： http://adobe-webplatform.github.io/balance-text/proposal/index.html

Answer 4

$('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>

Answer 5

我最近碰到了這個問題，我角度的應用程序，並使用我發現this post一些正則表達式添加一個非休息空間之前拉斯T指令：

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

但是角度是打印非換空間作爲一個字符串，所以我採用的是Unicode和它的工作很大：
String.replace(/\s([^\s<]+)\s*$/,'\u00A0$1');

Answer 6

香草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(' '); 
}