HTML 中的“空白符”包括空格 (space)、制表符 (tab)、换行符 (CR/LF) 三种。
我们知道,在默认情况下,HTML 源码中的空白符均被显示为空格,并且连续的多个空白符会被视为一个,或者说,连续的多个空白符会被合并。
然而在有些时候,我们希望 HTML 源码中的多个连续空格在网页浏览器中可以真实地呈现,或者需要源码中的换行符能起到真正的换行作用。于是,我们发现了 <pre> 标签,它可以真实还原它内部文本的空白符的真实情况。
于是我们经常会把一段表示计算机代码的文本放进 <pre> 标签中,它们在浏览器中会表现出自身的空格缩进和换行效果,而不需要我们增加额外的样式和标签来控制它的缩进和换行。
随着对 CSS 的了解不断深入,我们发现,原来这一切都是 white-space 属性在安排。<pre> 元素之所以如此神奇,是因为它自身具有 {white-space: pre;} 这一默认样式。
white-space 属性
CSS
中的 white-space
属性用于设置文本空白符的处理规则,这其中包括:是否合并空白符、是否保留换行符、是否允许自动换行。各属性值的不同行为如下表所示:
white-space 属性值一览表
属性值
空白符
换行符
自动换行
最早出现于
normal
|
合并 |
忽略 |
允许 |
CSS 1 |
nowrap
|
合并 |
忽略 |
不允许 |
CSS 1 |
pre
|
保留 |
保留 |
不允许 |
CSS 1 |
pre-wrap
|
保留 |
保留 |
允许 |
CSS 2.1 |
pre-line
|
合并 |
保留 |
允许 |
CSS 2.1 |
(注
:在 CSS1/2 下,white-space 属性只可应用于块级元素;在 CSS 2.1 下,可应用于所有元素。)
如果我们需要某个容器元素具有类似 <pre> 元素的空白符处理行为,则为它设置 {white-space: pre;} 样式即可。
对 pre-wrap 的需求
我们先解释一下上述表格中的“自动换行”行为,它是指某元素内部的文本流按照文本方向排版,当文本流遇到限制其继续延伸的边界时,是否换行。“不允许自动换行”则意味着文本流会溢出该元素。
因此,{white-space: pre;}
样式有时候并不能满足我们的期望。比如,在某些不需要特别严谨的场合,或者排版某些对换行不敏感的代码片断(比如 HTML 或
CSS)的时候,我们不希望代码片段中的一行长代码令它的容器元素产生水平滚动条,因为那样不便阅读。我们希望在这种情况下,长代码自动换行就好。
这时,对照一下上表中各属性值的不同行为特征,我们会发现 pre-wrap 这个属性值脱颖而出——它正是我们所需要的。
分享到:
相关推荐
HTML 的空白符处理规则 HTML 中的“空白符”包括空格 (space)、制表符 (tab)、换行符 (CR/LF) 三种。 我们知道,在默认情况下,HTML 源码中的空白符均被显示为空格,并且连续的多个空白符会被视为一个,或者说,连续...
例子:\S+匹配不包含空白符的字符串。 [^>]+>匹配用尖括号括起来的以a开头的字符串。 后向引用 使用小括号指定一个子表达式后,匹配这个子表达式的文本(也就是此分组捕获的内容)可以在表达式或其它程序中作进一步的...
14.17 删除和保留空白 501 14.18 选择 503 14.18.1 xsl:if 503 14.18.2 xsl:choose 503 14.19 合并多个样式单 505 14.19.1 使用xsl:import进行录入 505 14.19.2 使用xsl:include进行包括 505 14.19.3 使用xsl:...
14.17 删除和保留空白 501 14.18 选择 503 14.18.1 xsl:if 503 14.18.2 xsl:choose 503 14.19 合并多个样式单 505 14.19.1 使用xsl:import进行录入 505 14.19.2 使用xsl:include进行包括 505 14.19.3 使用xsl:...
1.6.6 空白处理 16 1.6.7 行尾处理 16 1.6.8 语言标识 16 1.7 格式良好的xml 17 .1.8 dtd 18 1.8.1 在xml文档中引入dtd 18 1.8.2 dtd的结构 21 1.9 有效的xml 35 1.10 xml处理器/解析器 35 1.11 小结 36 ...
1.6.6 空白处理 16 1.6.7 行尾处理 16 1.6.8 语言标识 16 1.7 格式良好的xml 17 .1.8 dtd 18 1.8.1 在xml文档中引入dtd 18 1.8.2 dtd的结构 21 1.9 有效的xml 35 1.10 xml处理器/解析器 35 1.11 小结 36 ...
1.6.6 空白处理 16 1.6.7 行尾处理 16 1.6.8 语言标识 16 1.7 格式良好的xml 17 .1.8 dtd 18 1.8.1 在xml文档中引入dtd 18 1.8.2 dtd的结构 21 1.9 有效的xml 35 1.10 xml处理器/解析器 35 1.11 小结 36 ...
1.6.6 空白处理 16 1.6.7 行尾处理 16 1.6.8 语言标识 16 1.7 格式良好的xml 17 .1.8 dtd 18 1.8.1 在xml文档中引入dtd 18 1.8.2 dtd的结构 21 1.9 有效的xml 35 1.10 xml处理器/解析器 35 1.11 小结 36 ...
去除文本首尾的空白字符... 199 HTML相关范例... 200 匹配HTML Tag. 200 匹配HTML Link. 201 检查HTTP URL. 203 验证主机名... 203 在真实世界中提取URL. 206 扩展的例子... 208 保持数据的协调性... 209 ...
156 8.4 界面设计的细节 160 8.4.1 控制组件外观 161 8.4.2 提示工具和助记符 162 8.5 事件处理 162 8.5.1 事件简述 162 8.5.2 组件的事件处理 164 8.5.3 事件的种类 176 8.5.4 事件适配器 179 习题...
其它的运行符可以作用于数字和日期,但不能作用于字符串,大部分的时候,使用gt等字母运算符代替>会有更好的效果,因为 FreeMarker会把>解释成FTL标签的结束字符,当然,也可以使用括号来避免这种情况,如:(x>y)> ...
5.2.7空白处理 114 5.3制作文字移动效果 115 5.4小结 116 第6章ActionScript3.0中的Array类型 117 6.1索引数组 117 6.1.1创建索引数组 117 6.1.2数组元素的语句遍历 118 6.1.3数组元素的函数遍历 120 6.1.4元素处理 ...
1.3.2 语法分析程序和处理程序... 15 1.3.3 浏览器和其他工具... 15 1.3.4 处理过程总结... 15 .4 相关技术... 17 1.4.1 超文本标记语言(Hypertext Markup Language)... 17 1.4.2 级联样式单(Cascading ...
1.3.2 语法分析程序和处理程序... 15 1.3.3 浏览器和其他工具... 15 1.3.4 处理过程总结... 15 .4 相关技术... 17 1.4.1 超文本标记语言(Hypertext Markup Language)... 17 1.4.2 级联样式单(Cascading ...
1.3.2 语法分析程序和处理程序... 15 1.3.3 浏览器和其他工具... 15 1.3.4 处理过程总结... 15 .4 相关技术... 17 1.4.1 超文本标记语言(Hypertext Markup Language)... 17 1.4.2 级联样式单(Cascading ...
* 侧边栏图标拖动时出现空白占位符 * 某些情况下侧边栏的"查看更多应用"的按钮无效 * 添加收藏时目录过多无法选中保存目录 * 页面载入完毕时搜索栏焦点丢失或者跑到页面的搜索框内 [Webkit 核心] * 锁定标签后关闭...
NEAT 开 发 指南 文档 适用于 PT80 系列 移动数据终端 版本记录 版本号 版本描述 发布日期 V 1.0 初始版本。 2012-04-12 V1.1 修改前三章内容 2012-09-25 目录 第一章 关于本手册.....................................
空白符指空格、回车等 XML文件事例 <?xml verson="1.0"?><!--这一句一定要求写在文件的第一行--> <!--只能有一个根元素即那一对根标签--> <root><!--根标签--> <!--根元素的内容--> <leaf><!--子元素--> ... ...
匹配的则是空白符之外的任何字符. 正则表灰式的字符类 字符 匹配 ____________________________________________________ [...] 位于括号之内的任意字符 [^...] 不在括号之中的任意字符 . 除了换行符之外的...
15 1.3.2 语法分析程序和处理程序... 15 1.3.3 浏览器和其他工具... 15 1.3.4 处理过程总结... 15 4 相关技术... 17 1.4.1 超文本标记语言(Hypertext Markup Language)... 17 1.4.2 级联样式单...