word-break
快速参考
| 类别 | 样式 |
|---|---|
| break-normal | word-break: normal; |
| break-all | word-break: break-all; |
| break-keep | word-break: keep-all; |
示例
正常断行
使用 break-normal 工具只在正常的单词断行点处添加换行符:
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-all 工具在必要时添加换行符,而不尝试保留完整的单词:
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 工具防止中文/日文/韩文(CJK)文本应用换行符:
抗衡不屈不挠 (kànghéng bùqū bùnáo) 这是一个长词,意思是不畏强暴,奋勇抗争,坚定不移,永不放弃。 这个词通常用来描述那些在面对困难和挑战时坚持自己信念的人,{" "} 他们克服一切困难,不屈不挠地追求自己的目标。无论遇到多大的挑战,他们都能够坚持到底,不放弃,最终获得胜利。
<p class="break-keep">抗衡不屈不挠...</p>
对于非 CJK 文本,break-keep 工具的行为与 break-normal 工具相同。
响应式设计
在 word-break 工具前加上像 md: 这样的断点变体,以便只在中等屏幕尺寸及以上应用该工具:
<p class="break-normal md:break-all ...">
Lorem ipsum dolor sit amet...
</p>
在 变体文档 中了解更多关于使用变体的信息。