CSS 设置文字折行

在网页文字比较多，并且文本容器宽度有限的话，文本就会溢出容器宽度，有可能覆盖到其它元素上面，这里的文本主要针对的是英文，因为英文单词是以空格为分界的，两个空格中间是一个完整的单词，无论是否超过容器宽度，浏览器默认都不会把这个单词分割成两部分，并放到下一行，例如下方代码所示：

<style>
  div {
    width: 100px;
    border: 1px solid blue;
  }
</style>
<div>
  <p>This is an example text, with a very looooooooooooooooooooooooooooooooooooooooooooooooooooong word</p>
</div>

预览：

示例里的 div 容器设置宽度为 100px，里面的 p 元素文本有一个特别长的单词，但是 CSS 默认是不会给它拆开并折行的，只有遇到下一个单词才会进行折行。

break-all

这个时候，我们可以使用 CSS 的 word-break 属性，来控制单词的分割与折行，例如上面的例子，word-break 默认取的是 normal 值，如果改成 break-all，那么它就根据容器的宽度，把单词拆开并折行：

<style>
  div {
    width: 100px;
    border: 1px solid blue;
  }

  p {
    word-break: break-all;
  }
</style>
<div>
  <p>This is an example text, with a very looooooooooooooooooooooooooooooooooooooooooooooooooooong word</p>
</div>

预览：

这时可以看到 looooooooooooooooooooooooooooooooooooooooooooooooooooong 这一长串被拆开了，多余的部分显示到了下一行。

keep-all

word-break 还有另一个取值 keep-all，这个是专门对中文、日文、韩文这种单个文字字体设计的，因为中文的字符都是单个文字，长度固定，所以容器无论宽度为多少都能正常换行，这时如果想让所有文字都在一行，无视容器的宽度，那么就可以使用 keep-all：

<style>
  div {
    width: 100px;
    border: 1px solid blue;
  }
  p {
    word-break: keep-all;
  }
</style>
<div>
  <p>这是一段比较比较比较比较比较比较比较比较比较比较比较长的中文段落。</p>
</div>

预览：

如果去掉 word-break，那么它就会显示成正常换行的形式：

<style>
  div {
    width: 100px;
    border: 1px solid blue;
  }
</style>
<div>
  <p>这是一段比较比较比较比较比较比较比较比较比较比较比较长的中文段落。</p>
</div>

预览：

小结

本小节介绍了 CSS word-break 属性的用法，控制文本是否应根据容器的宽度进行折行显示，对于英文文字来说，就是要不要把较长的单词分割并折行显示，对于中文来说，就是是否应该把所有文字都显示在一行。