Kiểm soát góa phụ/mồ côi với JavaScript?

Question

Có thể phụ thuộc vào thư viện hoặc -agnostic. Tôi chỉ muốn biết nếu một kịch bản tồn tại mà sẽ phân tích các trang (hoặc có thể một số nút mà nó đã được đưa ra) và ... "bảo vệ" chống lại góa phụ và trẻ mồ côi trong văn bản.

"bảo vệ" nghĩa là gì? Tôi không biết. Tôi đã cân nhắc xem liệu mình có thể tự mình làm được hay không, nhưng một phần của vấn đề là tôi thậm chí còn không biết chắc tôi sẽ làm thế nào.

Làm rõ: Điều này sẽ dành cho phiên bản của trang web, không in.

Answer 1

Tôi tin rằng bạn đang mô tả góa phụ chính tả trong tài liệu HTML? Ví dụ: khi một từ đơn lẻ quấn quanh một dòng mới trong một tiêu đề?

jQuery Widon't plugin xem qua HTML của bạn để tìm kiếm điều này và đặt khoảng trắng giữa các từ cuối cùng và cuối cùng để đảm bảo ít nhất hai từ được bao bọc thành một dòng mới.

Hope this helps, Karl

Answer 2

Có plugin gọi widowfix đó là cấu hình hơn một chút so với câu trả lời chấp nhận.

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

Answer 3

Adobe đã tăng cường và quyết định đây là vấn đề nghiêm trọng trên web. Họ đã đưa ra một đề xuất để giúp sửa chữa góa phụ/trẻ mồ côi và văn bản cân bằng các vấn đề về kiểu chữ khác.

Các kho cho jQuery plugin của họ là ở đây: https://github.com/adobe-webplatform/balance-text

Đề nghị cho w3c là ở đây: 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

Gần đây tôi đã chạy vào vấn đề này trong tôi ứng dụng góc cạnh và sử dụng một số regex tôi tìm thấy trên this post để thêm không gian không phá vỡ trước tia laser t từ:

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

Nhưng góc đã in khoảng trắng không bị phá vỡ như là một chuỗi vì vậy tôi sử dụng unicode và nó làm việc rất lớn:
String.replace(/\s([^\s<]+)\s*$/,'\u00A0$1');

Answer 6

Một vanilla JavaScript giải pháp, như ban đầu niêm yết tại 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(' '); 
}