CSS中的white-space,word-break和word-wrap

white-spaceword-breakword-wrapoverflow-wrap)估计是css里最基本却又容易让人迷惑的三个属性了。

white-space

white-space:正如它的名字,这个属性是用来控制空白字符的显示的,同时还能控制是否自动换行。它有6个值:

  1. normal:默认值。空格被合并,自动换行。
  2. nowrap:不仅空格被合并,换行符无效,连原本的自动换行都没了!只有\</br>才能导致换行!所以这个值的表现还是挺简单的,我们可以理解为"永不换行"。
  3. pre:下面四个用来保留空格,不常用。详情参考MDN介绍
  4. pre-wrap
  5. pre-line
  6. break-space

下面的表格记录的很详细:

属性值 换行符 空格和制表符 文字换行 行尾空格
normal 合并 合并 换行 删除
nowrap 合并 合并 不换行 删除
pre 保留 保留 不换行 保留
pre-wrap 保留 保留 换行 挂起
pre-line 保留 合并 换行 删除
break-spaces 保留 保留 换行 换行

word-break

word-break指定了怎样在单词内断行。这里说的单词在英文中很明显,但是,对于中文、日文和韩文(合称CJK文本)整段话都是一个单词。

word-break共有三个选项:

  1. normal:使用默认的断行规则。
  2. break-all:对于non-CJK文本,可在任意字符间断行。
  3. keep-all:CJK文本不断行。 Non-CJK文本表现同normal。

word-wrap (overflow-wrap)

word-wrap(overflow-wrap)控制长度超过一行的单词是否被拆分换行。有两个值:

  1. normal:长度超过一行的单词也不允许拆成两行显示。
  2. break-word:长度超过一行的单词允许被拆分成两行显示。

总结

  • white-space控制空白字符的显示,同时还能控制是否自动换行
  • word-break控制单词如何被拆分换行
  • word-wrapoverflow-wrap控制长度超过一行的单词是否被拆分换行,是word-break的补充。

参考

实际效果可以参考彻底搞懂word-break、word-wrap、white-space及其其提供的一个测试页面

MDN的官方文档当然是不得不看的:

  1. white-space
  2. word-break
  3. word-wrap(overflow-wrap)