Hướng dẫn responsive word-break css - css ngắt từ đáp ứng
Show Định nghĩa và sử dụngThuộ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úctag {
word-break: giá trị;
}word-break có các giá trị như sau:
HTML viết:
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
SpecificationCSS Text Module Level 3 # word-break-property Browser compatibilitytag {
word-wrap: giá trị;
}BCD tables only load in the browser
Tham khảoThuộc tính word-wrap
Định nghĩa và sử dụngp {
border: 1px solid #cc0000;
width: 150px;
}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 word-wrap có các giá trị như sau:p {
border: 1px solid #cc0000;
width: 150px;
word-wrap: break-word;
}Thuộc tínhCấu trúc Thuộc tính Học web chuẩn sẽ giúp bạn định hình lại những gì đã học. Học web chuẩn sẽ giúp bạn định hình lại những gì đã học. Thử nóCú phápThuộc tính 2 được chỉ định là một từ khóa duy nhất được chọn từ danh sách các giá trị bên dưới. Giá trị4 Sử dụng quy tắc ngắt dòng mặc định. 5 Để ngăn chặn tràn, các lần phá vỡ từ nên được chèn vào bất kỳ hai ký tự nào (không bao gồm văn bản Trung Quốc/Nhật Bản/Hàn Quốc). 6 Không nên sử dụng phá vỡ từ cho văn bản Trung Quốc/Nhật Bản/Hàn Quốc (CJK). Hành vi văn bản không CJK giống như đối với 4. 8 không dùng nữaDeprecated Có tác dụng tương tự như 9 và p {
border: 1px solid #cc0000;
width: 100px;
}0, bất kể giá trị thực của thuộc tính p {
border: 1px solid #cc0000;
width: 100px;
}1.Lưu ý: Trái ngược với p {
border: 1px solid #cc0000;
width: 100px;
}2 and p {
border: 1px solid #cc0000;
width: 100px;
}3 (see p {
border: 1px solid #cc0000;
width: 100px;
}1), p {
border: 1px solid #cc0000;
width: 100px;
}5 will create a break at the exact place where text would
otherwise overflow its container (even if putting an entire word on its own line would negate the need for a break).LƯU Ý: Mặc dù Học web chuẩn sẽ giúp bạn định hình lại những gì đã học. p {
border: 1px solid #cc0000;
width: 100px;
}2 is deprecated, it has the same effect, when specified, as 9 and p {
border: 1px solid #cc0000;
width: 100px;
}0 — regardless of the actual value of the p {
border: 1px solid #cc0000;
width: 100px;
}1 property.Định nghĩa chính thứcCú pháp chính thứcword-break = Ví dụHTML0 CSS1 Thông số kỹ thuật
Tính tương thích của trình duyệt webBảng BCD chỉ tải trong trình duyệt Xem thêm |
