Thuộc tính word-wrap

Đị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
Internet Explorer Firefox Opera Chrome Safari IOS Android Window phone
word-wrap 6 3.6 9.5 10 4 3.2 2.1 7.5