CSS

这样理解white-space属性的取值,你会不知不觉的记住了所有

前言

white-space这个属性就是用来处理空格的,主要有五个取值(normal,nowrap,pre,pre-wrap,pre-line)。要知道它们是如何控制文本的,通过demo演示,我来详细说一下。

white-space:normal

white-space:normal
右边的文本前部有两个空格,三个hello合并成一个长单词,还有一个换行符。

所以,通过效果可以看出默认是:

文首的空格被忽略。由于容器太窄,第一个单词溢出容器,然后在可换行符(后面一个空格)处换行。文本内部的换行符自动转成了空格。

white-space:nowrap

white-space:nowrap

white-space属性为nowrap时,与normal区别是不会因为超出容器宽度而发生换行

white-space:pre

white-space:pre

和上一篇说的pre标签效果一样:

展示结果原始文本完全一致,所有空格和换行符都保留了

white-space:pre-wrap

white-space:pre-wrap

从语义上也可以得出结论:

同样按照<pre>标签的方式处理,和pre取值唯一区别是超出容器宽度时,会发生换行

white-space:pre-line

white-space:pre-line

从上面效果可以看出,换行符没有转成空格,所以它的控制规则是:

保留换行符,其他都与normal的处理规则一致

(0)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

关键词:, ,

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注