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!

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。