CSS – word-break, word-wrap, white-space
2022/1/31 6:06:18
本文主要是介绍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 掉
这篇关于CSS – word-break, word-wrap, white-space的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-06css样式背景图怎么分开(css背景图片样式)-icode9专业技术文章分享
- 2024-03-06css线性样式(css中划线样式)-icode9专业技术文章分享
- 2024-03-06jq点击添加css样式(jq设置css样式)-icode9专业技术文章分享
- 2024-03-06流程样式css(css实现流程图)-icode9专业技术文章分享
- 2024-03-06css怎么调搜索键样式(css搜索框怎么调大小)-icode9专业技术文章分享
- 2024-03-06css层叠样式(Css层叠样式介绍)-icode9专业技术文章分享
- 2024-03-06css样式表有何特点(css样式表的使用方法有几种)-icode9专业技术文章分享
- 2024-03-06css的列表样式(css列表样式属性包括)-icode9专业技术文章分享
- 2024-03-06css3手机端样式(手机端css怎么写)-icode9专业技术文章分享
- 2024-02-21蝉知CSS样式修改(改变css样式)-icode9专业技术文章分享