Có cách nào để tự động kiểm soát các từ mồ côi trong tài liệu HTML không?

Question

Tôi đã tự hỏi nếu có một cách để tự động kiểm soát các từ mồ côi trong một tệp HTML, có thể bằng cách sử dụng CSS và/hoặc Javascript (hoặc cái gì khác, nếu có ai có đề xuất thay thế).

Bằng 'từ mồ côi', tôi ngụ ý những từ đơn lẻ xuất hiện trên một dòng mới ở cuối đoạn văn. Ví dụ:

"This paragraph ends with an undesirable orphaned 
word."

Thay vào đó, nó sẽ là thích hợp hơn để có ngắt đoạn như sau:

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

Trong khi tôi biết rằng tôi bằng tay có thể khắc phục điều này bằng cách đặt một HTML không gian không bị phá hủy ( ) giữa hai từ cuối cùng, tôi tự hỏi liệu có cách tự động hóa quy trình hay không, vì các điều chỉnh thủ công như thế này có thể nhanh chóng trở nên tẻ nhạt đối với các khối văn bản lớn trên nhiều tệp.

Ngẫu nhiên, các thuộc tính CSS2.1 orphans (và widows) chỉ áp dụng cho toàn bộ dòng văn bản và thậm chí chỉ để in các trang HTML (chưa kể thực tế là các thuộc tính này phần lớn không được hỗ trợ bởi hầu hết các trình duyệt chính)).

Nhiều ứng dụng bố cục trang chuyên nghiệp, chẳng hạn như Adobe InDesign, có thể automate the removal of orphans bằng cách tự động thêm các khoảng trống không phá vỡ nơi trẻ em mồ côi xảy ra; có bất kỳ loại giải pháp tương đương nào cho HTML không?

Answer 1

Tóm lại, không. Đây là cái gì đó đã thúc đẩy các nhà thiết kế in điên trong nhiều năm, nhưng HTML không cung cấp mức độ kiểm soát này.

Nếu bạn hoàn toàn tích cực muốn điều này, và hiểu hàm ý tốc độ, bạn có thể thử các gợi ý ở đây:

detecting line-breaks with jQuery?

Đó là giải pháp tốt nhất mà tôi có thể tưởng tượng, nhưng điều đó không làm cho nó một tốt dung dịch.

Answer 2

Bạn có thể tránh các từ mồ côi bằng cách thay thế khoảng trắng giữa hai từ cuối trong câu bằng không gian không phá vỡ ( ).

Có các plugin ở đó thực hiện việc này, ví dụ: jqWidon't hoặc this jquery snippet.

Ngoài ra còn có các plugin cho các khung phổ biến (chẳng hạn như typogrify cho django và widon't for wordpress) về cơ bản cũng thực hiện tương tự.

Answer 3

Nếu bạn muốn xử lý nó cho mình, mà không cần jQuery, bạn có thể viết một đoạn mã javascript để thay thế các văn bản, nếu bạn sẵn sàng để thực hiện một vài giả định:

1. Một câu luôn kết thúc bằng một dấu chấm .
2. Bạn luôn muốn thay thế khoảng trắng trước từ cuối cùng bằng & nbsp;

Giả sử bạn có html này (được thiết kế để ngắt ngay trước khi "kết thúc" trong trình duyệt của tôi ...khỉ với chiều rộng nếu cần):

<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> 

Bạn có thể tạo javascript này và đặt nó ở phần cuối của trang của bạn:

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

Các regex đơn giản là tìm tất cả các trường hợp (sử dụng g cờ) của một ký tự khoảng trống (\S) theo sau là bất kỳ số ký tự khoảng trống nào (\s), sau đó là dấu chấm. Nó tạo ra một tham chiếu ngược về không gian trắng mà bạn có thể sử dụng trong văn bản thay thế.

Bạn có thể sử dụng một regex tương tự để bao gồm các dấu câu kết thúc khác.

Answer 4

Tôi biết bạn muốn có giải pháp javascript, nhưng trong trường hợp ai đó tìm thấy trang này là giải pháp nhưng đối với email (nơi Javascript không phải là tùy chọn), tôi quyết định đăng giải pháp của mình.

Sử dụng CSS white-space: nowrap. Vì vậy, những gì tôi làm là bao quanh hai hoặc ba từ cuối cùng (hoặc bất kỳ nơi nào tôi muốn "ngắt"), thêm CSS nội tuyến (hãy nhớ, tôi xử lý email, tạo lớp học khi cần):

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

Trong bố cục linh hoạt/đáp ứng, nếu bạn làm đúng, vài từ cuối cùng sẽ vỡ thành dòng thứ hai cho đến khi có chỗ cho những từ đó xuất hiện trên một dòng.

Đọc thêm về về white-space tài sản vào liên kết này: http://www.w3schools.com/cssref/pr_text_white-space.asp

EDIT: 2015/12/19 - Vì đây không được hỗ trợ trong Outlook, tôi đã thêm một khoảng trắng không bị phá vỡ   giữa hai từ cuối cùng trong một câu. Nó ít mã hơn và được hỗ trợ ở mọi nơi.

EDIT: 2018/02/20 - Tôi đã phát hiện ra rằng Outlook App (iOS và Android) không hỗ trợ các tổ chức  , vì vậy tôi đã phải kết hợp cả hai giải pháp: ví dụ:

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

Answer 5

Nếu JavaScript của bên thứ ba là một tùy chọn, người dùng có thể sử dụng typogr.js, triển khai "typogrify" JavaScript. Bộ lọc cụ thể này được gọi là, không ngạc nhiên, 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>