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. 控制Input框输入的为大写字母

    本来我的想法是Jquery来控制的,万万没想到...用Css就可以实现!!!! .toUp input{    text-transform:uppercase; }     感谢:  http:// ...

  2. 在ios开发中nil和NUll和Nilde区别————和如何判断连个对象的关系和UISlider不能拖动的问题

    nil表示一个对象指针为空,针对对象 >示例代码: NSString *someString = nil; NSURL *someURL = nil; id someObject = nil; ...

  3. Java学习笔记——JDK1.7的新特性。

    1,switch中可以使用字串 Java代码: String s = "test"; switch (s) { case "test" : System.out ...

  4. PHP使用外部命令导出数据库,备份到服务器并下载到本地

    <?php // $dumpFileName目录要有可写权限 $DbHost = 'localhost'; $DbUser = 'root'; $DbPwd = '123456'; $DbNam ...

  5. VMware系统运维(八)vCenter Server安装

    1.终于开始安装vCenter Server了,需要配置数据源哦! 2.下一步 3.接受协议,下一步 4.输入许可密钥,也可以后面再输入,下一步 5.选择数据源,即我们前面配置的系统DSN,下一步 6 ...

  6. ionic中的ion-content与ion-scroll

    ion-content形成上下结构,上面固定,下层可滑动 首先要设置ion-content不可滑动:<ion-content class="has-subheader" sc ...

  7. springMVC第一课--配置文件

    刚学springMVC,记录下学习过程,供以后查阅(githup源码). 1,新建一个web工程.(其他按常规来) 如下:添加applicationContext.xml,webmvc-servlet ...

  8. 【BUG】---ng-show/ng-hide修改成功但没有效果

    问题:点击搜索,隐藏tab,出现搜索结果列表,调试也成功修改了分别元素的ng-hide就是没有效果 我的错误: <div ng-hide="{{isShow}}" class ...

  9. 【CSS3】---为边框应用图片 border-image

    为边框应用图片 border-image 顾名思义就是为边框应用背景图片,它和我们常用的background属性比较相似.例如: background:url(xx.jpg) 10px 20px no ...

  10. 清除层div浮动

    clearboth { clear: both; display: block; height: 0; font-size: 0; overflow: hidden; } <div class= ...