JavaScript를 통한 과부/고아 컨트롤?

Question

라이브러리 종속적이거나 진단적일 수 있습니다. 나는 단지 스크립트가 존재 하는지를 알고 싶어서 (또는 주어진 특정 노드) 페이지를 분석하고 ... 텍스트의 과부와 고아를 "보호"하고 싶다.

"보호"란 무엇을 의미합니까? 나는 모른다. 나는 내가 나 자신을 생각 해낼 수 있는지를 생각했지만, 문제의 일부는 내가 그것을 어떻게 할 것인지 심지어 확신 할 수 없다.

명확화 : 화면의 경우 인쇄용이 아닐 수 있습니다.

Answer 1

저는 HTML 문서에서 활자체를 묘사하고 있다고 생각합니까? 단일 단어가 머리글의 새 줄로 둘러 쌓인 경우 (예 :?)

jQuery Widon't plugin은 HTML을 검색하여 두 번째 마지막 단어와 마지막 단어 사이에 줄 바꿈하지 않는 공백을 두어 적어도 두 단어가 새 줄로 감싸도록합니다. 좀 더 구성 허용 대답보다 widowfix라는 플러그인이 있습니다이 도움이

희망, 칼

Answer 2

.

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

Answer 3

어도비가 조치를 취하고 이것이 웹에서 심각한 문제로 판단되었습니다. 그들은 미망인/고아와 다른 텍스트의 타이포그래피 문제를 해결할 수있는 제안서를 제출했습니다.

자신의 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

나는 최근에이 문제에 달렸다 내 각도 애플 리케이션 및에 발견 된 일부 정규식을 사용하여 las 전에 비 분리 공간을 추가했습니다. t 단어 : 원래 CSS Tricks에 게시 된,
String.replace(/\s([^\s<]+)\s*$/,'\u00A0$1');

Answer 6

바닐라 자바 ​​스크립트 솔루션 :

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

그러나 각 그래서 유니 코드를 사용하고 큰 일을 문자열로 비 분리 공백을 인쇄했다 :

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