white-space属性:

white-space 属性设置如何处理元素内的空白。

可能的值

值 描述
normal 默认值,合并所有空格,换行符会被浏览器忽略
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

这个属性在我做过的项目中是以规定导航条下拉菜单的布局风格,如果我不设置white-space,则其长度会继承一级菜单的长度,且超出部分会换行。当我设置white-space:nowrap,如右图:

  
 
如果元素的 white-space 设置为 pre-wrap,那么该元素中的文本会保留空白符序列,但是文本行会正常地换行。pre-line 与 pre-wrap 相反,会像正常文本中一样合并空白符序列,但保留换行符,如下表的区别,pre-line和pre-wrap的区别就是,一个合并空白符,一个不合并。
 
值 空白符 换行符 自动换行
pre-line 合并 保留 允许
normal 合并 忽略 允许
nowrap 合并 忽略 不允许
pre 保留 保留 不允许
pre-wrap 保留 保留 允许

待更新...

【笔记】W3C CSS关键属性的更多相关文章

  1. 2.前端笔记之css

    title: 1.前端笔记之CSS date: 2016-04-05 23:05:51 tags: 前端 categories: w3c --- 作者:刘耀 **出处:http://www.liuya ...

  2. PHP笔记(CSS篇)

    HTML常用于在网页中显示内容,当然,还可以是布局,但是比较不方便,所以,引进了CSS CSS全称Cascading Style Sheets,中文名:层叠样式表 帮助文档:CSS.chm 作用:布局 ...

  3. CSS z-index 属性的使用方法和层级树的概念

    之前有一篇文章提到过z-index,我们知道只有在元素设置了position部位static时才生效,而且z-index也跟父元素有关系,今天就在ie7遇到类似问题,在网上查了一些资料,发现一篇好文章 ...

  4. 【转】CSS z-index 属性的使用方法和层级树的概念

    文章转自:CSS z-index 属性的使用方法和层级树的概念,另外加了一点自己的注释 CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面 ...

  5. css之属性部分

    这篇写的是今天的学习到的属性,一共20个. 属性再多,但也要会使用,会在使用时可以记起它,才能起到它为我们所需要的作用. 样式属性 1.border CSS边框属性允许你指定一个元素边框的样式和颜色. ...

  6. css z-index属性

    原文地址:http://www.neoease.com/css-z-index-property-and-layering-tree/ CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有 ...

  7. [转] CSS direction属性简介与实际应用 ---张鑫旭

    一.用的少并不代表没有用 至少,在我接触的这么多项目里,没有见到使用过CSS direction属性做实际开发的. 为什么呢?是因为direction长得丑吗? 虽然说direction确实其貌不扬, ...

  8. [转]CSS vertical-align属性详解 作者:黄映焜

      CSS vertical-align属性详解 posted @ 2014-08-26 17:44 黄映焜   前言:关于vertical-align属性. 实践出真知. 垂直居中. 第二种用法. ...

  9. CSS vertical-align属性

    之前也经常用到vertical-align进行垂直居中对齐,突然发现其中的一些属性值根本就没使用过,也不清楚效果,将今天的研究成果记录下. vertical-align 属性 下表是w3c上列举的属性 ...

随机推荐

  1. sql over开窗函数

    1.使用over子句与rows_number()以及聚合函数进行使用,可以进行编号以及各种操作.而且利用over子句的分组效率比group by子句的效率更高. 2.在订单表(order)中统计中,生 ...

  2. 用Eclipse插件Bytecode Outline来查看Java字节码

    在遇到一些小问题的时候我们经常会使用Javap反编译取得字节码来分析,虽然Javap能完成这个工作,但是有两个缺点,一方面操作麻烦,需要很多步骤,一方面没有文档注释,对新手来说看起字节码来比较麻烦. ...

  3. java程序执行内存处理过程

    我们学习知识,不仅要知其然,还要知其所以然,你的工资必定和你学习的深度成正比. 在以往.net的学习过程中,我们了解了怎么去开发一个程序,并有了一定的开发经验,但是一个程序具体是怎么在内存中运行的呢? ...

  4. HDU 1875 畅通工程再续 (最小生成树)

    畅通工程再续 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  5. hdu3336

    Count the string Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  6. Ajax+JSON学习笔记(二)

    来源:http://www.imooc.com/learn/250 readyState属性 0:请求未初始化,open还没有调用 1:服务器连接已建立,open已经调用了 2:请求已接受,也就是接收 ...

  7. SimpleDateFormat 相关用法

    parse(String s)返回的是一个Date类型数据,format(Date d)返回的是一个String类型的数据 SimpleDateFormat sd = new SimpleDateFo ...

  8. Android聊天界面刷新消息

    今天,我想来分享一下自己初用线程的感受,虽然写法略显粗糙,并没有用线程Thread中核心的Looper,MessageQueue消息队列这些知识,正因为是初学线程,所以就只用最基础的来写了,慢慢学习优 ...

  9. iOS UIView简单缩放动画

    @interface ViewController () { UIView *animationView; UIButton *button; CGPoint animationPoint; } @e ...

  10. shell语法基础

    一.变量 1.linux大小写敏感,变量取名要注意大小写.可以通过变量名前面加$来访问变量的内容.可以通过使用read命令来将用户输入的值赋给一个变量. 2.给变量赋值时,如果字符串中包含空格,就必须 ...