Cách sử dụng dấu gạch ngang CSS tự động với `word-break: break-all`?

Question

Tôi đang sử dụng word-break: break-all; và muốn biết làm cách nào để trình duyệt tự động chèn hyphens, như được minh họa trong một MDN example.

div { 
 
    width: 80px; 
 
    height: 80px; 
 
    display: block; 
 
    overflow: hidden; 
 
    border: 1px solid red; 
 
    word-break: break-all; 
 
    hyphens: auto; 
 
    -ms-hyphens: auto; 
 
    -moz-hyphens: auto; 
 
}

<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

như vậy mà văn bản sẽ trông như thế này:

aaaaaaaa- 
aaaaaaaa- 
aaaaaaaa- 
aaaaaaaa 

Tôi tạo ra một JSFiddle quá.

Điều này cần phải hoạt động trong IE9/IE10, nhưng sẽ rất tuyệt nếu nó cũng hoạt động trong Firefox và Chrome.

Answer 1

Thuộc tính -ms-hyphens chỉ hoạt động trong IE10 +. Nó không thể có trong IE9 hoặc thấp hơn.

Xem biểu đồ tương thích của trình duyệt ở cuối liên kết tham chiếu bạn đã cung cấp.

Nó không làm việc trong Chrome nào: WebKit Hyphenation

Answer 2

Dấu nối được chèn nếu trình duyệt hỗ trợ & ngôn ngữ bao gồm một cuốn từ điển dùng dấu gạch nối. Nhưng

bạn

aaaaaaaaaaaaaaaaaa

không có trong từ điển.

Vì vậy, bạn phải đi cho có dấu gạch nối mềm mại như trong https://jsfiddle.net/LJYj3/5/

Đây là thực phẩm nhiều điều đáng suy nghĩ: https://stackoverflow.com/a/856322/1696030

Answer 3

Các word-break tài sản và dấu gạch nối là hai việc hoàn toàn khác nhau. Cái đầu tiên, ban đầu dành cho ngôn ngữ Đông Á chủ yếu, làm những điều xấu cho các ngôn ngữ như tiếng Anh: nó arbitr arily cắt w ords tại một số poi nts mà không ind icating rằng một từ đã được phá vỡ n.

Vì vậy, bạn nên quyết định xem bạn có biểu thức có thể chèn dấu ngắt dòng bởi trình duyệt tại bất kỳ thời điểm nào hoặc bạn có muốn gạch nối hay không.

Để gạch nối, mã CSS như vậy là OK, mặc dù nhiều người sẽ tư vấn đặt thuộc tính tiêu chuẩn thiết lập hyphens: auto cuối cùng, sau thuộc tính được đặt trước. Nhưng nó yêu cầu ngôn ngữ của văn bản được khai báo trong đánh dấu HTML, sử dụng ví dụ: <div lang=en>. Hơn nữa, hỗ trợ trình duyệt vẫn còn hạn chế: IE 9 không hỗ trợ gạch nối như vậy, và sự hỗ trợ trong IE 10 bao gồm một bộ ngôn ngữ tương đối nhỏ (bao gồm cả tiếng Anh tất nhiên).

Để gạch nối tự động trên IE 9, bạn sẽ cần phải sử dụng dấu gạch nối được lập trình phía máy chủ hoặc, đơn giản hơn, dấu gạch ngang phía máy khách với các công cụ như Hyphenator.js.