CSS – word-break, word-wrap, white-space
作者：互联网
参考
word-break 和 word-wrap 的区别 (我以为这篇已经很厉害了)
彻底搞懂word-break、word-wrap、white-space (没想到, 这一篇更厉害)
white-space
white-space 是负责管理空格, 换行的, 比如 <br>, \n
默认的行为:
和<br> 有效
连续的 space 会被缩减成一个
\n 无效
句子超过一行后会自动换行
单个字太长则会超出边界.
大神已经整理很好给我们了:
一般而言, 不需要背起来, 只需要知道默认行为和最常遇到的情况就可以了.
\n 无效是最常遇到的问题. 比如 user 通过 textarea 写了 \n 换行, 后来被弄掉了.
解决方案就是用 white-space: pre-line
word-break
word-break 讲的是单个字要怎样 break.
默认情况, 英文就是看连续字母一直到空格算一个能被 break 的字. 中文不看空格, 每一个字都可以被 break
break-all
break-all 的情况, 英文的每一个字母都可以被 break. 中文本来就可以啦.
keep-all
keep-all 的情况, 中文变得个英文一样, 只有到空格才能被 break.
2 个都很少会被用到. 因为效果都不太好.
overflow-wrap (word-wrap)
以前叫 word-wrap. CSS 3 后改的, 现在都支持了。
break-word
它的效果就是只有当一个字没办法被 break 又超过了边界时, 才把那个字 break-all. 这才是最长用到的体验.
总结
几个东西需要记住
1. 连续 space 会被合并, 所以要连续 space 最好用
2. \n 无效, 解决方式是用 white-space: pre-line
3. 当遇到 1 个很长的单字时, 用 overflow-wrap: word-wrap 把它 break 掉
标签：空格,word,space,break,wrap,white 来源： https://www.cnblogs.com/keatkeat/p/15857807.html