排版
word-break
用于控制元素中的单词中断的工具。
| 类 | 样式 |
|---|---|
break-normal | overflow-wrap: normal;
word-break: normal; |
break-words | overflow-wrap: break-word; |
break-all | word-break: break-all; |
break-keep | word-break: keep-all; |
示例(Examples)
¥Examples
普通(Normal)
¥Normal
使用 break-normal 工具仅在正常单词断点处添加换行符：
¥Use the break-normal utility to only add line breaks at normal word break points:
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="break-normal">The longest word in any of the major...</p>断词(Break Words)
¥Break Words
如果需要，使用 break-words 工具在单词中间添加换行符：
¥Use the break-words utility to add line breaks mid-word if needed:
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="break-words">The longest word in any of the major...</p>中断一切(Break All)
¥Break All
使用 break-all 工具在必要时添加换行符，而不尝试保留整个单词：
¥Use the break-all utility to add line breaks whenever necessary, without trying to preserve whole words:
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="break-all">The longest word in any of the major...</p>中断保持(Break Keep)
¥Break Keep
使用 break-keep 工具防止将换行符应用于中文/日文/韩文 (CJK) 文本：
¥Use the break-keep utility to prevent line breaks from being applied to Chinese/Japanese/Korean (CJK) text:
抗衡不屈不挠 (kànghéng bùqū bùnáo) 这是一个长词，意思是不畏强暴，奋勇抗争，坚定不移，永不放弃。这个词通常用来描述那些在面对困难和挑战时坚持自己信念的人， 他们克服一切困难，不屈不挠地追求自己的目标。无论遇到多大的挑战，他们都能够坚持到底，不放弃，最终获得胜利。
<p class="break-keep">抗衡不屈不挠...</p>对于非 CJK 文本，break-keep 工具具有与 break-normal 工具相同的行为。
¥For non-CJK text the break-keep utility has the same behavior as the break-normal utility.
响应式设计(Responsive design)
¥Responsive design
在 word-break 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<p class="break-normal md:break-all ..."> <!-- ... --></p>请参阅 变体文档 详细了解如何使用变体。