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)