white-space
可以控制空白的处理,也可以控制文字的换行,但是并不能单独处理单词过长需要换行的问题
空格 | 换行符 或 br | 自动换行 | 行末空格 | |
---|---|---|---|---|
normal (默认) | 合并 | 无效 | 有 | 忽略 |
nowrap | 合并 | 无效 | 无 | 忽略 |
pre | 保留 | 有效 | 无 | 保留所有,不换行 |
pre-wrap | 保留 | 有效 | 有 | 保留所有,不换行 |
pre-line | 合并 | 有效 | 有 | 忽略 |
break-spaces | 保留 | 有效 | 有 | 保留所有,并可换行 |
word-break
指定了怎样在单词内断行
CJK 文本(中/日/韩) | 非 CJK 文本 | |
---|---|---|
normal (默认) | 任意字符间换行 | 连续字母不拆分,遇到空格拆分 |
break-all | 任意字符间换行 | 任意字符间换行 |
keep-all | 连续字符不拆分,遇到空格拆分 | 连续字符不拆分,遇到空格拆分 |
其实主要两个作用:
break-all
:使非 CJK 文本能够任意换行
keep-all
:使 CJK 文本不任意换行
overflow-wrap
处理单个长单词,单个超出宽度的字符串的问题
换行 | |
---|---|
normal (默认) | 空格处换行 |
anywhere | 一行显示不下才会换行,会考虑其他软换行点 |
break-word | 一行显示不下才会换行,不考虑其他软换行点 |
主要跟
word-break: break-all
的区别:
只有当一个单词一整行都显示不下时,才会拆分换行该单词,否则在其他 CJK 文本等可以换行处进行换行,所以可能导致换行的上下行有不规则的空余空间
word-break:break-all和word-wrap:break-word的区别 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)
文本换行(white-space 、word-break、overflow-wrap)与 文本省略(text-overflow) - 掘金 (juejin.cn)
彻底搞懂word-wrap、white-space等 - 掘金 (juejin.cn)