Từ thông minh hơn trong CSS?

Question

Nếu tôi chỉ cần đặt word-break: break-all trên một phần tử, tôi thường kết thúc với điều này:

Xin chào mọi người, tôi đang gõ một mes
hiền đó là quá dài để phù hợp!

Rõ ràng đây sẽ là tốt hơn nhiều:

Xin chào mọi người, tôi đang gõ nhắn
đó là quá dài để phù hợp!

Nhưng cùng một lúc nếu một người nào đó viết:

BLAAAAAAAAARRRRRRRRRRRRGGGGGGGGHHHHHHHH !!!!!!

Sau đó, tôi muốn nó là:

BLAAAAAAAAARRRRRRRRRRR
RGGGGGGGGHHHHHHHH !!!!!!

Tôi dường như không thể tìm ra cách để thực sự làm điều này.

Lưu ý rằng chiều rộng của phần tử không cố định và có thể thay đổi.

Answer 1

Hãy thử word-wrap: break-word; nó sẽ hoạt động như bạn mong đợi.

Answer 2

Để ngắt từ thông minh hoặc đối với chính xác ngắt từ ở nơi đầu tiên, bạn cần quy tắc phụ thuộc vào ngôn ngữ. Đối với tiếng Anh và nhiều ngôn ngữ khác, ngắt chính xác có nghĩa là gạch nối, với dấu gạch nối được thêm vào cuối dòng khi xảy ra ngắt.

Trong CSS, bạn có thể sử dụng hyphens: auto, mặc dù bạn chủ yếu vẫn cần phải sao chép nó bằng cách sử dụng tiền tố của nhà cung cấp. Vì điều này không hoạt động trên IE 9, bạn có thể xem xét gạch nối dựa trên JavaScript như Hyphenate.js. Trong cả hai trường hợp, điều quan trọng là sử dụng đánh dấu ngôn ngữ (thuộc tính lang).

Phá vỡ chuỗi dài, không thể gạch chéo là một vấn đề khác. Chúng sẽ được xử lý tốt nhất trong quá trình tiền xử lý, nhưng trong một thiết lập đơn giản, word-break: break-word (có nghĩa là không chính xác ngắt lời, bằng tiếng Anh chẳng hạn) có thể được coi là trường hợp khẩn cấp.

Answer 3

Đối với rất nhiều dự án, chúng ta thường thêm này khi cần thiết:

.text-that-needs-wrapping { 
    overflow-wrap: break-word; 
    word-wrap: break-word; 
    -ms-word-break: break-all; 
    word-break: break-word; 
    -ms-hyphens: auto; 
    -moz-hyphens: auto; 
    -webkit-hyphens: auto; 
    hyphens: auto; 
} 

Nó xử lý các tình huống kỳ quặc nhất với các trình duyệt khác nhau.