6.4 文本换行
word-wrap / overflow-wrap 设置内容超过指定容器的边界时是否断行。
取值:
normal: 允许内容顶开或溢出指定的容器边界。 (默认值)
break-word: 内容将在边界内换行,如果需要,单词内部允许断行。它要求一个没有断行破发点的词必须保持为一个整体单位,如果当前行无法放下需要被打断的单词,为了保持完整性,会将整个单词放到下一行进行展示。这与word-break的break-word值效果相同
注意:
IE5.5率先实现了
word-wrap
,后期被w3c采纳成标准属性;CSS3中将
word-wrap
改名为overflow-wrap
;word-break 文本的字内换行行为。
取值:
normal: 默认的换行规则。依据各自语言的规则,允许在字间发生换行。 (默认值)
keep-all: 对于 CJK(中文,韩文,日文)文本不允许在字符内发生换行。Non-CJK 文本表现同
normal
break-all: 对于 Non-CJK 文本允许在任意字符内发生换行。该值适合包含一些非亚洲文本的亚洲文本,比如使连续的英文字符断行。
break-word: 与
break-all
相同,不同的地方在于它要求一个没有断行破发点的词必须保持为一个整体单位。这与 word-wrap 的break-word
值效果相同white-space 设置元素是否保留文本间的空格、换行;指定文本超过边界时是否换行。
取值:
normal: 默认处理方式。会将序列的空格合并为一个,内部是否换行由换行规则决定。 (默认值)
pre: 原封不动的保留你输入时的状态,空格、换行都会保留,并且当文字超出边界时不换行。等同 pre 元素效果
nowrap: 与
normal
值一致,不同的是会强制所有文本在同一行内显示。pre-wrap: 与
pre
值一致,不同的是文字超出边界时将自动换行。pre-line: 与
normal
值一致,但是会保留文本输入时的换行。注意: 控制文本断行,该属性是最常用的