overflow-wrap

警告：此属性最初是名为word-wrap的非标准且无前缀的 Microsoft 扩展，并且大多数浏览器都以相同的名称实现了它。此后它已重命名为overflow-wrap，word-wrap是它的别名。

overflow-wrap CSS 属性应用于文本，设置浏览器是否应在原本不可换行的字符串中插入换行符以防止文本溢出其行框。

试一试

注意：与 word-break 相比，overflow-wrap 仅在整个单词无法放在其自身行上而不会溢出时才会创建换行符。

语法

css
/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;

/* Global values */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: revert;
overflow-wrap: revert-layer;
overflow-wrap: unset;

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

值

normal

行只能在正常的断字点（例如两个单词之间的空格）处断开。

anywhere

为了防止溢出，如果行中没有其他可接受的断字点，则原本不可换行的字符字符串（如长单词或 URL）可能会在任何位置断开。在断字点处不会插入连字符。计算最小内容内在尺寸时，会考虑断字引入的软换行机会。

break-word

与anywhere值相同，如果行中没有其他可接受的断字点，则允许通常不可换行的单词在任意位置断开，但计算最小内容内在尺寸时，**不会**考虑断字引入的软换行机会。

正式定义

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

正式语法

overflow-wrap = 
  normal      |
  break-word  |
  anywhere

示例

比较 overflow-wrap、word-break 和 hyphens

此示例比较了overflow-wrap、word-break和hyphens在分解长单词时的结果。

HTML

html
<p>
  They say the fishing is excellent at Lake
  <em class="normal">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
  I've never been there myself. (<code>normal</code>)
</p>
<p>
  They say the fishing is excellent at Lake
  <em class="ow-anywhere">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>overflow-wrap: anywhere</code>)
</p>
<p>
  They say the fishing is excellent at Lake
  <em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>overflow-wrap: break-word</code>)
</p>
<p>
  They say the fishing is excellent at Lake
  <em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>word-break</code>)
</p>
<p>
  They say the fishing is excellent at Lake
  <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
  I've never been there myself. (<code>hyphens</code>, without
  <code>lang</code> attribute)
</p>
<p lang="en">
  They say the fishing is excellent at Lake
  <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
  I've never been there myself. (<code>hyphens</code>, English rules)
</p>
<p class="hyphens" lang="de">
  They say the fishing is excellent at Lake
  <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
  I've never been there myself. (<code>hyphens</code>, German rules)
</p>

CSS

css
p {
  width: 13em;
  margin: 2px;
  background: gold;
}

.ow-anywhere {
  overflow-wrap: anywhere;
}

.ow-break-word {
  overflow-wrap: break-word;
}

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

.hyphens {
  hyphens: auto;
}

结果

规范

规范
CSS 文本模块级别 3
# 溢出换行属性

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅