HTMLCSS中的空格处理_如何保留页⾯中的空格
html中的空格的规则
在html中内容中的多个空格⼀般会被视为⼀个,连续的多个空格符被⾃动合并了。同时内容前后的空格也会被清除,如下:
<p> fly63  com </p>
显⽰效果为:
fly63 com
备注:浏览器的这种机制处理,同样适⽤于除了普通的空格键,还包括制表符(\t)和换⾏符(\r和\n),可以通过使⽤<br>标签显式表⽰换⾏。
html空格保留
这时候如果希望html中多个连续的空格在⽹页上能显⽰,在浏览器中表现出真实的⾃⾝空格缩进和换⾏效果。我们知道⼀般有2种⽅式,使⽤<pre>标签,或者使⽤ ;来代表空格。如下:
<pre> fly63 com </pre>
或者
<p> fly63     com </p>
html中空格⽬前有这些:
   不断⾏的空⽩(1个字符宽度)
   ;半个空⽩(1个字符宽度)
  ⼀个空⽩(2个字符宽度)
   ;窄空⽩(⼩于1个字符宽度)
css空格保留
1、css中当 white-space 属性取值为pre时,就按照<pre>标签的⽅式处理。浏览器会保留⽂本中的空格和换⾏,例如:
<p > fly63  com <p>
显⽰效果为:' fly63  com '
2、css的white-space属性为pre-line时,意为保留换⾏符。除了换⾏符会原样输出,其他都与white-space:normal规则⼀致。
<p >
fly63
com
</p>
显⽰效果为:
'fly63
com'
3、css的 letter-spacing 属性⽤于设置⽂本中字符之间的间隔,例如:
<p >欢迎光临!</p>
显⽰效果为:' 欢迎光临!'
html中的5种空格表示4、css的 word-spacing 属性⽤于设置⽂本中单词之间的间隔,例如:<p >Happy new year!</p>
显⽰效果为: Happy  new  year!