1. white-space
white-space
用于指定浏览器如何处理元素文本中的空格、制表符和换行符,以及指定当元素内文本到达容器末尾即将溢出容器时,是否发生自动换行。
white-space
的可取值有:
- normal(默认值):文本中连续的空格、制表符将被统一替换成一个空格(Collapse),换行符不发生换行,转而替换成一个空格(Collapse),当文本到达容器末尾时,自动换行(Wrap)。
- nowrap:文本中连续的空格、制表符将被统一替换成一个空格(Collapse),换行符不发生换行,转而替换成一个空格(Collapse),当文本到达容器末尾时,不换行(No wrap)。
- pre:文本中的连续空格、制表符被保留(Preserve),换行符发生换行(Preserve),当文本到达容器末尾时,不换行(No wrap)。
- pre-wrap:文本中的连续空格、制表符被保留(Preserve),换行符发生换行(Preserve),当文本到达容器末尾时,自动换行(Wrap)。
- pre-line:文本中连续的空格、制表符将被统一替换成一个空格(Collapse),换行符发生换行(Preserve),当文本到达容器末尾时,自动换行(Wrap)。
将以上属性值的特点绘制成图表如下:
关于以上属性的具体表现,可参考:mdn white-space.
2. word-break
word-break
属性用于指定当文本到达容器末尾需要自动换行时,文本的分割方式(即确定换行结点)。
word-break
的可取值有:
- normal(默认值):若在当前单词的基础上添加下一个单词后会溢出容器,则在当前单词的末尾处进行换行(下一个单词放置在第二行,此时每个单词视作一个整体,不可分割)。
- break-all:将文本分割成最小单位,即对于英文单词,分割成单个字母,对于CJK(Chinese/Japanese/Korean),分割成单字,连续排列,在容器末尾处换行。
-
keep-all:对于英文文本,表现为
normal
,对于CJK文本,连续的多个字作为一个整体(不可分割),只有在空格处才会发生换行。 -
break-word:在
normal
的基础上,若一行中只有一个单词,且该单词的长度超出了容器宽度,则该单词会在容器末尾处发生分割来进行换行。
关于以上属性的具体表现,可参考:mdn word-break.
3. word-wrap
word-wrap
的可取值为:
- normal(默认值)
- break-word
word-wrap: break-word
与word-break: break-word
作用相同,不过对于Edg、Firefox、IE浏览器,不支持word-break: break-word
,此时只能用word-wrap: break-word
。
4. overflow-wrap
overflow-wrap
的可取值为:
- normal(默认值)
- break-word
overflow-wrap
与word-wrap
的作用相同,其实overflow-wrap
就是word-wrap
经过重命名而来,不过对于一些浏览器还暂不支持该属性,此时只能用word-wrap
。