溢出包装 | overflow-wrap (Text) - CSS 中文开发手册 - Break易站

  CSS 中文开发手册

溢出包装 | overflow-wrap (Text) - CSS 中文开发手册

该overflow-wrapCSS属性指定浏览器是否应该向语句中插入换行符，以防止文本溢出其内容框。与word-break相反，如果整个单词不能在没有溢出的情况下放在自己的行上，overflow-wrap只会创建一个中断。

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

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

该属性最初是一个非标准的，没有前缀的微软扩展word-wrap，并被大多数具浏览器实现。现在，它已经被重新命名为overflow-wrap，而word-wrap则作为该属性的一个别名。

Initial value	normal
Applies to	all elements
Inherited	yes
Media	visual
Computed value	as specified
Animation type	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar

语法

该overflow-wrap属性被指定为下面的列表中的任一个关键字值。

可能值

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

break-word——为了防止溢出，如果在行中没有其他可接受的断点，通常不能破坏的语句也可能会在任意点被断开。

形式语法

normal | break-word

实例

CSS

.normal {
  width: 13em;
  background: gold;
}
.break-word {
  width: 13em;
  background: lime;
  overflow-wrap: break-word;
}

HTML

<p class="normal">FStrPrivFinÄndG (Gesetz zur Änderung des
  Fernstraßenbauprivatfinanzierungsgesetzes
  und straßenverkehrsrechtlicher Vorschriften)</p>
<p class="break-word">FStrPrivFinÄndG (Gesetz zur Änderung des
  Fernstraßenbauprivatfinanzierungsgesetzes
  und straßenverkehrsrechtlicher Vorschriften)</p>

结果

规范

Specification	Status	Comment
CSS Text Module Level 3The definition of 'overflow-wrap' in that specification.	Working Draft	Initial definition

浏览器兼容性

Feature	Firefox (Gecko)	Chrome	Edge	Internet Explorer	Opera	Safari
Basic support (as word-wrap)	3.5 (1.9.1)	1.0	(Yes)	5.5	10.5	1.0
overflow-wrap	49 (49)	(Yes)	No support	?	(Yes)	(Yes)

Feature	Firefox Mobile (Gecko)	Android	Edge	IE Mobile	Opera Mobile	Safari Mobile
Basic support (as word-wrap)	1.0 (1.9.1)	1.0	(Yes)	?	?	1.0
overflow-wrap	49 (49)	(Yes)	No support	?	(Yes)	(Yes)

  CSS 中文开发手册

  本文标题：溢出包装 | overflow-wrap (Text) – CSS 中文开发手册 - Break易站

转载请保留页面地址：https://www.breakyizhan.com/css/32109.html