这样理解white-space属性的取值,你会不知不觉的记住了所有
孤峰
孤峰家
2023-07-22
198人阅读
前言
white-space这个属性就是用来处理空格的,主要有五个取值(nor**l,nowrap,pre,pre-wrap,pre-line)。要知道它们是如何控制文本的,通过**演示,我来详细说一下。white-space:nor**l
右边的文本前部有两个空格,三个hello合并成一个长单词,还有一个换行符。
所以,通过效果可以看出默认是:
文首的空格被忽略。由于容器太窄,第一个单词溢出容器,然后在可换行符(后面一个空格)处换行。文本内部的换行符自动转成了空格。 white-space:nowrap
white-space属性为nowrap时,与nor**l区别是不会因为超出容器宽度而发生换行 white-space:pre
和上一篇说的pre标签效果一样:
展示结果原始文本完全一致,所有空格和换行符都保留了 white-space:pre-wrap
从语义上也可以得出结论:
同样按照<pre>标签的方式处理,和pre取值唯一区别是超出容器宽度时,会发生换行 white-space:pre-line
从上面效果可以看出,换行符没有转成空格,所以它的控制规则是:
保留换行符,其他都与nor**l的处理规则一致
很赞哦! ()
转载:感谢您阅览,转载请注明文章出处“来源从小爱孤峰知识网:一个分享知识和生活随笔记录的知识小站”。
链接:这样理解white-space属性的取值,你会不知不觉的记住了所有http://www.gufeng7.com/niaolang/1780.html
联系:如果侵犯了你的权益请来信告知我们删除。邮箱:119882116@qq.com