Ngắt dòng tự động với thuộc tính word-wrap trong CSS3

Thuộc tính word-wrap dùng để ngắt những từ quá dài, mà nếu bạn không dùng đến nó sẽ gây ra tình trạng phá vỡ layout của trang.

Cách đơn giản nhất để hiểu thuộc tính này là thông qua ví dụ, chẳng hạn tôi có một danh sách các tên miền ưa thích như sau:

1.vnexpress.net
2.dantri.vn
3.www.google.com
4.www.ducanhplus.com

 

Bạn dễ dàng thấy tên miền www.ducanhplus.com bị tràn ra khỏi layout, sở dĩ như vậy vì nó dài hơn chiều rộng của box chứa nó. Để khắc phục tình trạng này ta dùng word-wrap với giá trị là break-word, code mẫu:

<div style=”border: 3px solid aqua; padding: 5px; width: 120px; word-wrap: break-word;“>
1.vnexpress.net<br />
2.dantri.vn<br />
3.www.google.com<br />
4.www.ducanhplus.com
</div>

Kết quả:

1.vnexpress.net
2.dantri.vn
3.www.google.com
4.www.mangluoitoancau.com

 

Như bạn đã thấy, một từ dài đã không còn tràn ra ngoài nữa mà bị ngắt rồi xuống dòng kế tiếp (bình thường thì không thể ngắt được, vì nó thuộc về cùng một từ)

Ngoài giá trị break-word, còn có giá trị khác là normal. Giá trị normal là dạng mặc định, tức là từ quá dài sẽ tràn ra khỏi layout.

Cú pháp tổng quát: word-wrap: normal | break-word;

Dĩ nhiên là bạn chỉ được chọn một trong 2 giá trị thôi nhá, hoặc là normal, hoặc là break-word.

Câu hỏi: liệu còn cách nào để tránh tràn trong diện tích hẹp như vậy không?

Câu trả lời là có. Bạn có thể dùng thuộc tính overflow. Chẳng hạn tôi có thể sửa hộp trên như sau:

1.vnexpress.net
2.dantri.vn
3.www.google.com
4.www.mangluoitoancau.com

 

Tuy nhiên như bạn đã biết (hoặc bây giờ sẽ biết) đối với người dùng thì thanh cuộn dọc hoàn toàn OK nhưng họ không ưa thanh cuộn ngang cho lắm. Vì vậy word-wrap vẫn hữu ích hơn trong trường hợp này.