white-space、word-wrap和word-break
white-space
用来设置如何处理元素中的空格、换行符和是否允许内容过长时自动转行。
属性值:
- normal(默认值):合并连续空格、换行符为一个空白符、允许自动换行
- no-wrap:合并连续空格、换行符为一个空白符、不允许自动换行
- pre:不合并连续空格、换行符保留,不允许自动换行。
也就是保留内容中原本的格式,但是不自动换行 - pre-wrap:不合并连续空格、换行符保留,允许自动换行。
也就是保留内容中原本的格式,并且自动换行 - pre-line:合并连续空格、换行符保留,允许自动换行
针对这其中的允许自动换行的属性,CJK(中日韩文字)是自动换行,非CJK换行的表现则是由下面的word-wrap和word-break决定。
而不允许自动换行的属性,内容超出容器边界的表现则由overflow属性决定。
word-wrap(overflow-wrap)
此属性用于表明当一个不能被分开的字符串太长时,是否允许这样的单词中断换行。
可以继承
属性值:
normal(默认值):在单词结尾处才换行
break-word:如果要换行的话,强行将单词折断换行。
word-break
word-break 指定了怎样在单词内断行。
可继承
属性值:
- normal(默认值):CJK可以在字符间随意断行,非CJK只能在单词结尾断行。
- break-all:非CJK也可以在任意字符间断行
- keep-all:CJK 文本不断行。 非CJK 文本表现同 normal,即不能在字符间断行。
word-wrap与word-break的区别
主要是word-wrap:break-word与word-break:break-all的区别:
word-wrap:break-word 会先尝试寻找空格、连接符等正常的换行点,如果正常换行后可以不溢出那么就这样正常换行。如果正常换行后还是溢出,才会强制中断非CJK字符串。
word-break:break-all则是直接在中断非CJK字符串进行换行。
参考文章:
word-break:break-all和word-wrap:break-word的区别
white-space、word-wrap和word-break的简单整理