Thuộc tính word-break

Định nghĩa và sử dụng

Thuộc tính word-break sẽ làm cho những chữ trong một từ không còn là một thể thống nhất, nghĩa là có thể xuống hàng bất cứ vị trí nào trong từ.

Cấu trúc

tag {
    word-break: giá trị;
}

word-break có các giá trị như sau:

Thuộc tính giá trị Ví dụ Mô tả
word-break break-all word-break: break-all; khi hết đoạn thì một từ sẽ tự động ngắt ở bất kỳ chữ nào để xuống hàng.
hyphenate word-break: hyphenate; Một từ sẽ được xuống hàng tại một vị trí gạch nối thích hợp.
normal word-break: normal; Trả về dạng mặc định ban đầu cho một từ.

HTML viết:

<html>
<head></head>
<body>
<p>Học web chuẩn sẽ giúp bạn định hình lại những gì đã học.</p>
</body>
</html>

CSS viết:

p {
    border: 1px solid #cc0000;
    width: 100px;
}

Hiển thị trình duyệt khi chưa có word-break:

Học web chuẩn sẽ giúp bạn định hình lại những gì đã học.

Thêm thuộc tính word-break vào CSS:

p {
    border: 1px solid #cc0000;
    width: 100px;
    word-break: break-all;
}

Hiển thị trình duyệt khi có word-break:

Học web chuẩn sẽ giúp bạn định hình lại những gì đã học

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-break:

  Trình duyệt PC Smartphone - Tablets
Internet Explorer Firefox Opera Chrome Safari IOS Android Window phone
word-break 7 15 12.1 8 3 3.2 2.1 7.5