overflow-wrap

Các tiện ích để kiểm soát ngắt dòng trong các từ trong một phần tử bị tràn.

Class Styles

Class	Styles
`wrap-break-word`	`overflow-wrap: break-word;`
`wrap-anywhere`	`overflow-wrap: anywhere;`
`wrap-normal`	`overflow-wrap: normal;`

wrap-break-word

overflow-wrap: break-word;

wrap-anywhere

overflow-wrap: anywhere;

wrap-normal

overflow-wrap: normal;

Ví dụ

Ngắt giữa từ

Sử dụng tiện ích wrap-break-word để cho phép ngắt dòng giữa các chữ cái trong một từ nếu cần thiết:

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

<p class="wrap-break-word">The longest word in any of the major...</p>

Ngắt ở bất kỳ đâu

Tiện ích wrap-anywhere hoạt động tương tự như wrap-break-word, ngoại trừ việc trình duyệt tính đến các ngắt dòng giữa từ khi tính toán kích thước nội tại của phần tử:

Điều này hữu ích để ngắt văn bản bên trong các container flex, nơi bạn thường cần đặt min-width: 0 trên phần tử con để cho phép nó thu nhỏ dưới kích thước nội dung của nó.

Ngắt bình thường

Sử dụng tiện ích wrap-normal để chỉ cho phép ngắt dòng tại các điểm ngắt tự nhiên, như khoảng trắng, dấu gạch nối và dấu câu:

<p class="wrap-normal">The longest word in any of the major...</p>

Responsive design

Prefix an overflow-wrap utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<p class="wrap-normal md:wrap-break-word ...">  Lorem ipsum dolor sit amet...</p>

Learn more about using variants in the variants documentation.