标签：空格 word space break wrap white

参考

word-break 和 word-wrap 的区别 (我以为这篇已经很厉害了)

彻底搞懂word-break、word-wrap、white-space (没想到, 这一篇更厉害)

 

white-space

white-space 是负责管理空格, 换行的, 比如 &nbsp; <br>, \n

默认的行为: 

&nbsp;和<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 最好用 &nbsp;

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。