CSS3 word-wrap 属性

CSS3 word-wrap 属性主要用于控制在文本内容超过容器的宽度时，如何处理这些内容。word-wrap 属性两个可选值，分别是 normal 和 break-word。

语法

word-wrap: normal|break-word|initial|inherit;

属性值

• normal：默认值，表示不换行；
• break-word：超出容器宽度时，单词会被强制断开换行；
• initial：表示将属性设置为其默认值（normal）；
• inherit：表示继承父级元素的属性值。

详解

normal

normal 值表示不换行，当文本内容超过容器宽度时，文本会溢出容器外部。此时，若容器没有设置 overflow 属性，超出的文本将不会显示。若设置了 overflow 属性，其中需要注意的是 overflow 属性必须为 visible 以外的值：

/* CSS 代码 */
div {
    width: 200px; 
    height: 50px;
    white-space: nowrap; 
    overflow: hidden;
    word-wrap: normal;
}

<!-- HTML 代码 -->
<div>
    This text should overflow the parent.
</div>

break-word

break-word 值表示单词会被强制断开换行，以适应容器宽度。若当前单词超出了容器宽度，单词将被完整地断开成两个单词，其中前一个单词将出现在当前行，剩余部分会移到下一行显示。需要注意的是，在中文环境下，依旧以字符和单词为单位自动换行；而在英文环境下，以单词为单位自动断行。

/* CSS 代码 */
div {
    width: 200px; 
    height: 50px;
    white-space: nowrap; 
    overflow: hidden;
    word-wrap: break-word;
}

<!-- HTML 代码 -->
<div>
    This sentence should break into multiple lines if the container
    is narrow enough.
</div>

总结

CSS3 word-wrap 属性是一个很实用的属性，用来控制文本内容溢出容器时的处理。当不设置该属性时，文本内容会直接溢出容器外部。若设置为 break-word，则可以强制单词换行显示，适应容器宽度。需要注意的是，在中文环境下，以字符和单词为单位自动换行；在英文环境下，以单词为单位自动断行。