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 server小技巧-自动添加时间与主键自增长

    在敲机房收费系统的时候,遇到添加时间的时候总是通过vb端调用当前时间再添到sql server中,期间还有时因为添加时间格式的不统一导致一些小问题,现在才知道原来是自己孤陋寡闻,sql server ...

  2. Kinect For Windows V2开发日志九:侦测并绘制人体骨架

    简介 在上一篇<侦测.追踪人体骨架>里,介绍了关节点的使用办法,这一篇记录将关节点与OpenCV结合的绘图方法. 代码 #include <iostream> #include ...

  3. GSS5 spoj 2916. Can you answer these queries V 线段树

    gss5 Can you answer these queries V 给出数列a1...an,询问时给出: Query(x1,y1,x2,y2) = Max { A[i]+A[i+1]+...+A[ ...

  4. 解决cell循环利用造成的重复勾选

    @interface ProfessionViewController (){ NSMutableArray *_professionArray;//cell模型数组 NSMutableArray * ...

  5. 面对一个“丢失了与用户“签订”的协议的修改”时进行的思考。

    对于上图中的gauge,将value与label之间的比例值调整了,调整为1:1.2.这意味着,在新系统中打开老报表,老报表中的这个gauge的value可能会比以前大,二者可能是用户厌恶的效果. 严 ...

  6. @font-face 用字体画图标

    HTML <body> <!-- ul.layout>li*5>a[href=#]>i.icon --> <!-- Sublime Text 快捷拼写 ...

  7. VC++ DLL 发布到生产环境过程

    最近项目中用到了VC++ DLL,在本机调试时无任何问题,但是发布出来后,COPY到另外的机器就报错,说找不到DLL,由于自身工作接触这方面比较少,经过一番折腾后,终于解决,以下为解决步骤 一,平台工 ...

  8. PHP浮点数的精度

    在百度知道上看到这么一个问题 var_dump((0.3-0.2)==0.1); 结果是:false 后来查查手册,原来是浮点数的精度问题.那么0.3-0.2-0.1等于多少呢,结果:2.775557 ...

  9. Part 34 to 35 Talking about multiple class inheritance in C#

    Part 34 Problems of multiple class inheritance Part 35 Multiple class inheritance using interfaces

  10. ubuntu安装 ibus-google输入法

    1.$sudo apt-get install ibus-googlepinyin     //ibus 融合了许多种输入法,google便是一种,此步就是下载安装ibus-google拼音输入法. ...