CSS控制本文换行：word

在页面上对文本进行修饰的时候，特别是针对西文文本，往往会涉及到单词过长需要换行的问题（这里暂不讨论CJK系的文本）。本篇文章将会讨论两个用于控制文本换行的CSS属性word-wrap和word-break。

word-wrap

我们先来看看mozilla上如何定义word-wrap的。

The word-wrap CSS property is used to specify whether or not the browser may break lines within words in order to prevent overflow (in other words, force wrapping) when an otherwise unbreakable string is too long to fit in its containing box.

我们来尝试翻译一下这段定义，

word-wrap属性用于说明是否允许浏览器在单词内进行断句（换句话说，就是是否能够强制换行），这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。

下图是word-wrap属性的详细内容，

其实有点CSS基础的人看到这段定义，应该就能明白这个CSS属性是干什么用的了。不过为了更加明白的阐述，我们下面来看个例子。

下面的页面是没有设置任何CSS换行控制的表现，

从图中可以看出来，句子最后个这个单词see...e实在是太长了，导致第一行已经放不下了。虽然浏览器默认将这个超长的单词放在第二行了，但是无奈这个容器仍然还是不够宽，最终导致的结果就是这个单词超出了容器，即所谓的溢出。

这里，其实有一点被隐藏的要素，就是，现代浏览器已经够聪明了，它知道第一行的空间已经放不下这个长单词了，尝试另起一行，将这个单词放到新行上，但是新起的一行仍然不能容纳这个长单词，此时浏览器也无能为力了。

此时，就需要我们的word-wrap属性登场了。

.container {
    word-wrap: break-word;
}

效果如下图，

现在ok了，这个超长的单词see...e已经被强制换行了，虽然有点影响阅读。

word-break

说完了word-wrap，我们再来说说word-break，先来看看mozilla是如何定义这个属性的，

The word-break CSS property is used to specify how (or if) to break lines within words.

对应的翻译如下，

CSS的word-break属性用于说明如何进行单词内的断句。

下图是word-break属性的详细内容，

这里我们使用如下语法，

.container {
    word-break: break-all
}

我们再来看看效果，

看到没有，原来第一行空出来的那么点空间，现在也被填充了字符。

所以说，word-break:break-all是一个非常暴力的属性，它会为了充分利于页面空间将无视任何限制，对任何长单词在任何字符处进行断句（有时间这将非常影响文本的阅读）。

事实上，word-wrap:break-word与word-break:break-all共同点是都能把长单词强行断句，不同点是word-wrap:break-word会首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句；而word-break:break-all则不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了。

参考列表

• mozilla:word-wrap
• mozilla:word-break
• w3school:word-wrap
• w3school:word-break
• 你真的了解word-wrap和word-break的区别吗？