Đôi khi một chuỗi văn bản thực sự dài có thể làm tràn vùng chứa của một bố cục.
Ví dụ:
Đây là tin sốt dẻo:
overflow-wrap: break-word;đảm bảo dây dài sẽ quấn và không bị bung ra khỏi hộp đựng. Bạn cũng có thể sử dụngword-wrapvì như thông số kỹ thuật nói, chúng thực sự chỉ là tên thay thế cho nhau. Một số trình duyệt hỗ trợ một và không hỗ trợ khác. Firefox (đã thử nghiệm v43) chỉ hỗ trợword-wrap. Blink (Chrome v45 đã thử nghiệm) sẽ mất một trong hai.- Với
overflow-wrapviệc sử dụng tất cả bản thân, các từ sẽ ngắt quãng ở bất cứ đâu mà chúng cần. Nếu có một ký tự "ngắt được chấp nhận" (chẳng hạn như dấu gạch ngang theo nghĩa đen), nó sẽ ngắt ở đó, nếu không thì nó chỉ làm những gì cần làm. - Bạn cũng có thể sử dụng
hyphens, bởi vì sau đó nó sẽ cố gắng thêm dấu gạch nối một cách trang nhã vào vị trí ngắt nếu trình duyệt hỗ trợ nó (Nhấp nháy không vào lúc viết, Firefox thì có). word-break: break-all;là cho trình duyệt biết rằng bạn có thể ngắt từ ở bất cứ đâu mà nó cần. Mặc dù nó cũng làm được điều đó, vì vậy tôi không chắc trong những trường hợp nào thì nó cần thiết 100%.
Nếu bạn muốn thủ công hơn với dấu gạch nối, bạn có thể đề xuất chúng trong phần đánh dấu của mình. Xem thêm trên trang MDN.
Hỗ trợ trình duyệt
Đối với word-break:
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 44 | 15 | 5.5 | 12 | 9 |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9,0-9,2 |
Đối với hypens:
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5.1 * |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 4,2-4,3 * |
Đối với overflow-wrap:
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 |
Đối với text-overflow:
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 4 | 7 | 6 | 12 | 3.1 |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Ngăn Tràn bằng Dấu ba chấm
Một cách tiếp cận khác cần xem xét là cắt bớt văn bản hoàn toàn và thêm dấu chấm lửng nơi chuỗi văn bản chạm vào vùng chứa:
.ellipses ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )Điều tuyệt vời khi sử dụng text-overflowlà nó được hỗ trợ trên toàn cầu.
Ví dụ
Xem Các từ dài có dấu gạch nối của bút bằng CSS-Tricks (@ css-trick) trên CodePen.
Xem Pen Ellipses by CSS-Tricks (@ css-trick) trên CodePen.
Xem Pen Figuring Out Line Wrapping của Chris Coyier (@chriscoyier) trên CodePen.
Nhiêu tai nguyên hơn
- Michael Scharnagl: Xử lý các từ dài trong CSS
- Kenneth Auchenberg: Gói / gạch nối từ sử dụng CSS
- MDN: ngắt từ, ngắt từ, dấu gạch nối
- Thông số: Văn bản CSS cấp 3
Đối với SCSS nghiêng
Đây có xu hướng là những thứ bạn rắc vào mã khi cần thiết, vì vậy chúng tạo ra @mixins đẹp:
@mixin word-wrap() ( overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; )@mixin ellipsis() ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )