Thuộc tính overflow-wrap
Thuộc tính overflow-wrap cho phép ngắt
các chữ cái của một từ dài xuống dòng mới, nếu
từ đó không vừa với chiều rộng của container.
Cú pháp
bộ chọn {
overflow-wrap: break-word | normal;
}
Giá trị
| Giá trị | Mô tả |
|---|---|
break-word |
Buộc các từ dài bị ngắt xuống một dòng mới, nếu từ đó không vừa trong container. Khi đó từ sẽ bắt đầu ở dòng mới. |
normal |
Hành vi tiêu chuẩn: nếu một từ dài không vừa chiều rộng với container - nó sẽ tràn ra ngoài ranh giới của nó (và bắt đầu ở dòng mới). |
Giá trị mặc định: normal.
Ví dụ . Giá trị normal
Trong ví dụ này, một từ rất dài sẽ không vừa trong container và tràn ra ngoài ranh giới của nó (và bắt đầu ở dòng mới):
<div id="elem">
Lorem ipsum dolor sit amet
loooooooooooooooooooooooooooooooongword,
consectetur adipiscing elit.
</div>
#elem {
word-wrap: normal;
overflow-wrap: normal;
border: 1px solid red;
width: 200px;
}
:
Ví dụ . Giá trị break-word
Và bây giờ những chữ cái không vừa, sẽ đơn giản được ngắt xuống dòng tiếp theo (và từ dài vẫn sẽ bắt đầu từ một dòng mới):
<div id="elem">
Lorem ipsum dolor sit amet
loooooooooooooooooooooooooooooooongword,
consectetur adipiscing elit.
</div>
#elem {
overflow-wrap: break-word;
border: 1px solid red;
width: 200px;
}
:
Xem thêm
-
thuộc tính
word-break,
cũng cho phép ngắt chữ cái của từ dài xuống dòng mới -
thuộc tính
word-wrap,
là tên cũ đã lỗi thời của thuộc tính overflow-wrap -
thuộc tính
hyphens,
bật tính năng ngắt từ theo âm tiết -
thẻ
wbr,
thực hiện ngắt mềm bằng HTML -
thẻ
br,
dùng để buộc văn bản ngắt xuống dòng mới