Định nghĩa và sử dụng
Thuộc tính word-wrap sẽ làm cho những từ dài xuống hàng mà không làm vỡ layout.
Cấu trúc
tag { word-wrap: giá trị; }
word-wrap có các giá trị như sau:
Thuộc tính | giá trị | Ví dụ | Mô tả |
---|---|---|---|
word-wrap | break-word | word-wrap: break-word; | Những từ quá dài sẽ xuống hàng. |
normal | word-wrap: normal; | Trả về dạng mặc định ban đầu cho word-wrap. |
Ví dụ
HTML viết:
<html> <head></head> <body> <p>HỌC WEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEB CHUẨN</p> </body> </html>
CSS viết:
p { border: 1px solid #cc0000; width: 150px; }
Hiển thị trình duyệt khi chưa có word-wrap:
HỌC WEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEB CHUẨN
Thêm thuộc tính word-wrap vào CSS:
p { border: 1px solid #cc0000; width: 150px; word-wrap: break-word; }
Hiển thị trình duyệt khi có word-wrap:
HỌC WEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEB CHUẨN
Trình duyệt và hệ điều hành hỗ trợ
Yêu cầu phiên bản trình duyệt và hệ điều hành tối thiểu được hỗ trợ cho thuộc tính word-wrap:
Trình duyệt PC | Smartphone - Tablets | |||||||
word-wrap | 6 | 3.6 | 9.5 | 10 | 4 | 3.2 | 2.1 | 7.5 |