Thuộc tính word-break

Thuộc tính word-break 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

cssselector {
  word-break: break-all | keep-all | normal;
}

Giá trị	Mô tả
`break-all`	Buộc các từ dài ngắt xuống dòng mới, nếu từ đó không vừa trong container.
`keep-all`	Dùng để ngắt các ký tự tượng hình.
`normal`	Hành vi mặc định: nếu một từ dài không vừa chiều rộng container - nó sẽ tràn ra ngoài ranh giới của nó (đồng thời sẽ bắt đầu từ một dòng mới).

Giá trị mặc định: normal.

Trong ví dụ này, một từ rất dài sẽ không vừa container và sẽ tràn ra ngoài ranh giới của nó (đồng thời sẽ bắt đầu từ một dòng mới):

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  width: 200px;
  word-break: normal;
  border: 1px solid red;
}

Результат:

Còn 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:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  width: 200px;
  word-break: break-all;
  border: 1px solid red;
}

Результат:

thuộc tính overflow-wrap,
cũng cho phép ngắt các chữ cái của một từ dài xuống dòng mới
thuộc tính hyphens,
bật tính năng ngắt từ theo âm tiết
thuộc tính overflow,
cắt bỏ các phần tràn ra ngoài ranh giới khối
thẻ wbr,
thực hiện ngắt mềm bằng các phương tiện HTML
thẻ br,
nhờ đó có thể buộc văn bản ngắt xuống dòng mới