断字

word-break CSS 属性设置文本是否在超出内容框时出现换行。

尝试一下

语法

css
/* Keyword values */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: auto-phrase; /* experimental */
word-break: break-word; /* deprecated */

/* Global values */
word-break: inherit;
word-break: initial;
word-break: revert;
word-break: revert-layer;
word-break: unset;

word-break 属性指定为从以下值列表中选择的单个关键字。

值

normal

使用默认换行规则。

break-all

为了防止溢出，应该在任何两个字符之间插入换行符（不包括中文/日语/韩语文本）。

keep-all

不应在中文/日语/韩语（CJK）文本中使用换行符。非 CJK 文本的行为与 normal 相同。

auto-phrase

与 word-break: normal 具有相同的效果，不同之处在于会执行特定于语言的分析，通过不将换行符放在自然短语的中间来改善换行符。

break-word

与 overflow-wrap: anywhere 结合 word-break: normal 具有相同的效果，无论 overflow-wrap 属性的实际值是什么。

注意： 与 word-break: break-word 和 overflow-wrap: break-word（参见 overflow-wrap）相比，word-break: break-all 会在文本超出容器时确切的位置创建断行（即使将整个单词放在单独的行上会消除断行的需要）。

规范还列出了一个额外的值 manual，目前在任何浏览器中都不支持。当实现时，manual 将与 word-break: normal 具有相同的效果，只是在东南亚语言中不会自动插入断行。这是因为，在这些语言中，用户代理经常在次优位置插入断行。manual 允许您手动在最佳位置插入换行符。

正式定义

初始值normal
应用于所有元素
继承是
计算值如指定
动画类型离散

正式语法

word-break = 
  normal      |
  keep-all    |
  break-all   |
  break-word

示例

HTML

html
<p>1. <code>word-break: normal</code></p>
<p class="normal narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>2. <code>word-break: break-all</code></p>
<p class="breakAll narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>3. <code>word-break: keep-all</code></p>
<p class="keepAll narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>4. <code>word-break: manual</code></p>
<p class="manual narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>5. <code>word-break: auto-phrase</code></p>
<p class="autoPhrase narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>6. <code>word-break: break-word</code></p>
<p class="breakWord narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

CSS

css
.narrow {
  padding: 10px;
  border: 1px solid;
  width: 500px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 1px;
}

.normal {
  word-break: normal;
}

.breakAll {
  word-break: break-all;
}

.keepAll {
  word-break: keep-all;
}

.manual {
  word-break: manual;
}

.autoPhrase {
  word-break: auto-phrase;
}

.breakWord {
  word-break: break-word;
}

规范

规范
CSS 文本模块级别 3
# word-break-property

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅