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

cssbộ chọn {
  overflow-wrap: break-word | normal;
}

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.

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

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

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

Результат:

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

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

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

Результат: