HTML 문서에서 고아가 된 단어를 자동으로 제어하는 ​​방법이 있습니까?

Question

은 CSS 및/또는 Javascript (또는 다른 사람에게 대체 제안이있는 경우)를 사용하여 HTML 파일에 고아가 된 단어을 자동으로 제어 할 수 있는지 궁금합니다.

'고아 단어'는 단락 끝에 새 줄에 나타나는 단수 단어를 의미합니다. 예를 들어 다음과 같이 대신

"This paragraph ends with an undesirable orphaned 
word."

, 단락 나누기를하는 것이 바람직 할 것이다 :

"This paragraph no longer ends with an undesirable 
orphaned word."

내가 수동으로 HTML이 아닌 깨는 공간을 배치하여이 문제를 해결할 수 있다는 것을 알고 있지만 ( ) 마지막 두 단어 사이에, 내가 수동으로 조정이 여러 파일에 걸쳐 텍스트의 큰 블록에 대한 지루한 될 수 있기 때문에 프로세스를 자동화하는 방법이 있는지 궁금하네요.

부수적으로 만 이러한 속성은 대부분의 주요 브라우저에서 주로 지원되지 않는 사실을 언급뿐만 아니라 (HTML 페이지의 인쇄에도 다음 텍스트의 전체 라인에 적용하고, orphans (및 widows)을 CSS2.1 속성).

Adobe InDesign과 같은 많은 전문 페이지 레이아웃 응용 프로그램은 고아가 발생하는 곳에 자동으로 공백을 추가하여 automate the removal of orphans 수 있습니다. 거기에 HTML에 대한 동등한 솔루션이 있습니까?

Answer 1

간단히 말해서, 아니오. 이것은 인쇄 디자이너를 수년 동안 미치게 만들었지 만 HTML은 이러한 수준의 제어를 제공하지 않습니다.

당신이 절대적으로 긍정적이 원하고, 속도에 미치는 영향을 이해한다면, 당신은 여기에 제안을 시도 할 수 있습니다 :

내가 상상할 수있는 가장 좋은 방법입니다

detecting line-breaks with jQuery?

,하지만 그것을 잘하지 않습니다 해결책.

Answer 2

문장에서 마지막 두 단어 사이의 간격을 줄 바꿈하지 않는 공백 ( )으로 바꾸면 고아가 된 단어를 피할 수 있습니다.

여기에는 플러그인이 있습니다 (예 : jqWidon't 또는 this jquery snippet).

또한 본질적으로 똑같은 기능을하는 인기있는 프레임 워크 용 플러그인 (예 : typogrify 장고와 widon't for wordpress)이 있습니다.

Answer 3

당신이 jQuery를하지 않고, 스스로를 처리 할 경우 몇 가정 할 의향이 있다면, 당신은 텍스트를 대체하는 자바 스크립트 코드 조각을 작성할 수 있습니다

이

1. 문장은 항상 마침표로 끝을 .
2. 항상 마지막 단어 앞에있는 공백을 & nbsp로 바 꾸고 싶습니다.

이 html이 있다고 가정하면 (브라우저에서 "끝"전에 스타일이 잘못되었습니다 ...)폭과 원숭이) 필요한 경우 :

<div id="articleText" style="width:360px;color:black; background-color:Yellow;"> 
    This is some text with one word on its own line at the end. 
    <p /> 
    This is some text with one word on its own line at the end. 
</div> 

당신이 자바 스크립트를 작성하고 페이지의 끝 부분에 넣을 수의)을 g 플래그를 사용하여 (

<script type="text/javascript"> 
    reformatArticleText(); 
    function reformatArticleText() 
    { 
     var div = document.getElementById("articleText"); 
     div.innerHTML = div.innerHTML.replace(/\S(\s*)\./g, "&nbsp;$1."); 
    } 
</script> 

이 정규식은 단순히 모든 인스턴스를 찾습니다 공백 문자 (\S) 다음에 공백 문자가 아닌 숫자 (\s)와 마침표가옵니다. 바꾸기 텍스트에서 사용할 수있는 비 공백에 대한 역 참조를 만듭니다.

비슷한 정규식을 사용하여 다른 끝 문장 부호를 포함 할 수 있습니다.

Answer 4

자바 스크립트 솔루션을 원했지만 누군가이 페이지에서 솔루션을 찾았지만 전자 메일 (자바 스크립트가 옵션이 아님)을 발견 한 경우 솔루션을 게시하기로 결정했습니다.

CSS white-space: nowrap을 사용하십시오. 그래서 내가하는 일은 마지막 두 개 또는 세 단어 (또는 내가 "중단"을 원할 때마다)를 둘러싸고, 인라인 CSS를 추가하는 것입니다 (전자 메일을 처리하고 필요에 따라 수업을 작성하십시오).

<td> 
    I don't <span style="white-space: nowrap;">want orphaned words.</span> 
</td> 

유동적 인/반응적인 레이아웃에서 올바르게 작성하면 마지막 한 단어는 두 단어가 한 줄에 나타날 때까지 두 번째 줄로 나뉩니다.

이 링크에 white-space 부동산에 관한 대해 자세히 알아 : http://www.w3schools.com/cssref/pr_text_white-space.asp

편집 : 2015년 12월 19일 -이 Outlook에서 지원되지 않기 때문에, 나는 사이의 비 분리 공백  을 추가했습니다 한 문장의 마지막 두 단어. 코드가 적고 어디에서나 지원됩니다.

편집 : 2018년 2월 20일 - 나는 아웃룩 앱 (iOS 및 Android)가   엔티티를 지원하지 않는다는 것을 발견했습니다, 그래서 두 솔루션을 결합 했어 : 예 :

<td> 
    I don't <span style="white-space:nowrap;">want&nbsp;orphaned&nbsp;words.</span> 
</td> 

Answer 5

타사 JavaScript가 옵션 인 경우 typogr.js, JavaScript "typogrify"구현을 사용할 수 있습니다. 이 특정 필터는 Widont라고 불립니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/typogr/0.6.7/typogr.min.js"></script> 
<script> 
document.body.innerHTML = typogr.widont(document.body.innerHTML); 
</script> 
</body>