zoukankan      html  css  js  c++  java
  • 每天CSS学习之white-space

    white-space是CSS的属性,其作用是规定文本不进行换行。

    white-space有以下几个值:

    1、normal:该值为默认值,段落前后的空白会被浏览器忽略。如下所示:

    <div style="200px;height:200px;white-space:normal;">    This is an Action!    </div>

    我们在This的前面加了许多空白,在Action的后面也加了许多空白。但是结果如下:

     

     

    2、pre:段落前后的空白会被浏览器保留,文本不会换行。如下所示:

     

     

    3、nowrap:文本不会换行,直到遇到<br>标签为止。如下所示:

    先展示normal的结果:

    <div style="10px;height:80px;white-space:normal;">    This is an Action!    </div>

    结果:

    如果换为nowrap,则:

    <div style="10px;height:80px;white-space:nowrap;">    This is an Action!    </div>

    结果:

     

    4、pre-wrap:保留前后空白符,但是会进行正常的换行。如:

    <div style="10px;height:80px;white-space:pre-wrap;">    Thisisan Action!    </div>

    结果:

    看到了没?如果段落之间有空格,空格也会换行。

     

    5、pre-line:合并空白序列符,但会保留换行符。什么意思呢?看到上面的pre-wrap的结果了吗?接下来让我们看一看pre-line的结果:

    <div style="10px;height:80px;white-space:pre-line;">    This is an Action!    </div>

    结果:

    <div style="200px;height:80px;white-space:pre-line;">    This is an Action!    </div>

    结果:

    pre-line也就是说,将段落前后的空白符去掉,如果在换行的时候有空白符单独一行的,将空白符也去掉。

     

     6、inherit:从父元素继承white-space的属性值。

     

     

     

  • 相关阅读:
    【linux 高级网络应用】1,2-企业IP规划部署实战,ip地址和子网划分
    【linux CCNP】4,5-linux网络及OIS-TCP/IP
    【linux CCNP】3-linux网络抓包和TCP三次握手
    【linux CCNA】1和2-linux网络基础知识入门 与 tcp协议
    CephFS文件储存
    OSD纵向扩容
    CEPH之对象存储
    CEPH之块存储
    ceph_dashboard
    ceph 创建和删除osd
  • 原文地址:https://www.cnblogs.com/williamwsj/p/7360581.html
Copyright © 2011-2022 走看看