overflow-wrap

用於控制溢出元素內單字斷行方式的通用類別。

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;

範例（Examples）

單字中間斷行（Wrapping mid-word）

使用 wrap-break-word 通用類別允許在需要時於單字的字母之間斷行：

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>

任意處斷行（Wrapping anywhere）

wrap-anywhere 通用類別的行為與 wrap-break-word 類似，但瀏覽器在計算元素的固有尺寸時會考慮單字中間的斷行：

這對於在 flex 容器內換行文字很有用，通常你需要在子元素上設定 min-width: 0 才能讓它縮小到小於其內容尺寸。

正常換行（Wrapping normally）

使用 wrap-normal 通用類別僅在自然的換行點（如空格、連字號和標點符號）允許斷行：

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

響應式設計（Responsive design）

在 overflow-wrap 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：

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

在變體文件中了解更多關於使用變體的資訊。