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. 如何将你自己的Python package发布到PyPI上

    零.前言 最近做了一个小工具,查询IP或者域名的归属地.做完之后想发布到PyPI上,这样大家就可以通过pip来安装了. 在发布的过程中遇到了一些问题,也学到了很多东西.记录到这篇文章中.希望对大家有所 ...

  2. Ngnix 安装、信号量、虚拟主机配置

    ngnix的安装很简单 1.先从ngnix官网下载ngnix压缩包 wget http://nginx.org/download/nginx-1.6.2.tar.gz 2.解压并进入其目录 tar - ...

  3. WEB系统架构

    客户端方向:框架+控件+模板+元数据辅助:懒加载+合并请求+异步任务+推送+缓存技术:reactjs,requirejs,jquery,angularjs,bootstrap,ant.design,f ...

  4. [CAMCOCO][C#]我的系统架构.服务器端.(四)----Model层 实体的自我验证

    这是Model的第二篇,上一篇点这里 这块完全是扒了@何镇汐大神博客里的教程实现的,在这之前完全没想到数据验证居然可以这样做!!在此表示严重感谢!!! 点击这里可以去了解这个方法的原理,老胡估计自己是 ...

  5. 【转载】看懂SqlServer查询计划

    看懂SqlServer查询计划 阅读目录 开始 SQL Server 查找记录的方法 SQL Server Join 方式 更具体执行过程 索引统计信息:查询计划的选择依据 优化视图查询 推荐阅读-M ...

  6. JS正则表达式简单总结

    正则表达式定义 JavaScript中的正则表达式用RegExp 对象表示,可以使用RegExp ()构造函数来创建RegExp对象,不过RegExp 对象更多的是通过一种特殊的直接量愈发来创建. 例 ...

  7. 行列转换 pivot

    select * from ( select isnull(c.type,'其他') type,d from ( select ID,Record_code,code,day(thedate) d f ...

  8. js 调用php代码

    <?php $test = "var a = ".$_GET['test'].";"; ?> <mce:script type="t ...

  9. 《iOS开发指南》正式出版-源码-样章-目录,欢迎大家提出宝贵意见

    智捷iOS课堂-关东升老师最新作品:<iOS开发指南-从0基础到AppStore上线>正式出版了 iOS架构设计.iOS性能优化.iOS测试驱动.iOS调试.iOS团队协作版本控制.... ...

  10. 用实体框架搭建MVC程序框架(全部)

    第一步:1.新建项目 2.新建domain类库 3.新建Data类库 4.为上面的1.2.3添加实体框架nuget包.(可以右键管理nuget包来查找entityframework,当然也可以通过程序 ...