Skip to main content

overflow-wrap

CSS 属性 **overflow**-wrap 是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。

与word-break相比，overflow-wrap仅在无法将整个单词放在自己的行而不会溢出的情况下才会产生中断。

注：**word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。**

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

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

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

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

break-word 表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行。

word-break

CSS 属性 word-break 指定了怎样在单词内断行。

/* Keyword values */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; /* deprecated */
/* Global values */
word-break: inherit;
word-break: initial;
word-break: unset;

normal使用默认的断行规则。

break-all对于non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。

keep-allCJK 文本不断行。 Non-CJK 文本表现同 normal。

break-word 他的效果是word-break: normal 和 overflow-wrap: anywhere  的合，不论 overflow-wrap的值是多少。

注意：与 word-break: break-word 和 overflow-wrap: break-word（详见 overflow-wrap）对比，word-break: break-word 将在文本可能溢出其容器的确切位置创建一个断点。