zoukankan      html  css  js  c++  java
  • HTML/CSS中的空格处理\_如何保留页面中的空格【转】

    HTML中的空格的规则

    在html中内容中的多个空格一般会被视为一个,连续的多个空格符被自动合并了。同时内容前后的空格也会被清除, 如下:

    <p> fly63   com </p>
    

    显示效果为:

    fly63 com
    

    备注:浏览器的这种机制处理,同样适用于除了普通的空格键,还包括制表符( )和换行符( 和 ),可以通过使用标签显式表示换行。

    HTML空格保留

    这时候如果希望HTML中多个连续的空格在网页上能显示,在浏览器中表现出真实的自身空格缩进和换行效果。 我们知道一般有2种方式,使用标签,或者使用 来代表空格。如下:

    <pre> fly63 com </pre>
    

    或者

    &nbsp;fly63 &nbsp;&nbsp; &nbsp;com&nbsp;
    

    Html中空格目前有这些:
    | | | |

    &nbsp; &#160; 不断行的空白(1个字符宽度)
    &ensp; &#8194; 半个空白(1个字符宽度)
    &emsp; &#8195; 一个空白(2个字符宽度)
    &thinsp; &#8201; 窄空白(小于1个字符宽度)

    SS空格保留

    1、CSS中当 white-space 属性取值为pre时,就按照标签的方式处理。浏览器会保留文本中的空格和换行,例如:

    <p style="white-space:pre"> fly63  com <p>
    

    显示效果为:' fly63   com '

    2、CSS的white-space属性为pre-line时,意为保留换行符。除了换行符会原样输出,其他都与white-space:normal规则一致。

    <p style="white-space: pre-line">
    	fly63
    	com
    </p>
    

    显示效果为:

    fly63
    com
    3、CSS的 letter-spacing 属性用于设置文本中字符之间的间隔,例如:

    <p style="letter-spacing:5px;">欢迎光临!</p>
    

    显示效果为:欢   迎   光   临   !

    4、CSS的 word-spacing 属性用于设置文本中单词之间的间隔,例如:

    <p style="word-spacing:5px">Happy new year!</p>
    

    显示效果为: Happy   new   year!

    文章转自:http://www.fly63.com/article/detial/972

  • 相关阅读:
    POJ 1659 Frogs' Neighborhood
    zoj 2913 Bus Pass(BFS)
    ZOJ 1008 Gnome Tetravex(DFS)
    POJ 1562 Oil Deposits (DFS)
    zoj 2165 Red and Black (DFs)poj 1979
    hdu 3954 Level up
    sgu 249 Matrix
    hdu 4417 Super Mario
    SPOJ (BNUOJ) LCM Sum
    hdu 2665 Kth number 划分树
  • 原文地址:https://www.cnblogs.com/KillBugMe/p/12680966.html
Copyright © 2011-2022 走看看