探讨HTML不同空格的特性与表现形式(推荐)

所属分类: 网页制作 / HTML/Xhtml 阅读数: 815
收藏 0 赞 0 分享

一. 概要

在编写 HTML 模板时,有时候会利用空格来充当文字排版的手段,最为常见的情况是在一段文字之间插入空格,来分隔相对独立的词汇。但面对这种情况,一般是不会直接使用普通空格(半角空格,即英文输入法下键盘直接输入的空格),因为当我们期望连续输入几个这样的空格来制造一段空白时,实际最终网页上显示出的空白大小只有一个空格的大小,因此通常会用 来代替半角空格,连续输入多个 会产生相应数量的空白 。实际上除了 外,Unicode 还定义了大量特性各异的,包含 HTML 实体形式的空格字符,本文要研究的正是这些平时相对较少被注意到的空格以及它们的特性。

二. Unicode 中有 HTML 实体形式的空格

以下是 Unicode 中有 HTML 实体形式的空格及其产生的空白的效果:

这些空格按特性基本可以分为三类:

1. 不换行空格

不换行空格只有 一种,最主要特性是不会被浏览器判断为可以在中间打断,这也是 被创造出来的主要用途。这里引用一段简短的介绍:

is the entity used to represent a non-breaking space. It is essentially a standard space, the primary difference being that a browser should not break (or wrap) a line of text at the point that this occupies.

例如,"This is a test for non-breaking space" 这个句子,如果单词之间的空格都使用半角空格,并把它置于一个宽度刚好不足的容器中时,"space" 这个单词会因为宽度不足而单独换行了。

如果想把 "breaking" 与 "space" 同时换行,这时只需要把 "breaking" 与 "space" 之间的半角空格替换为 即可:

可以看出,"-" 这类普通字符仍然会被浏览器认为是单词的分隔点,而 "breaking" 与 "space" 之间由于有 的连接,由于 不会被打断,因而浏览器会认为它们是相连的一个完整单词,在位置允许的情况下把它们同时换到下一行。

需要注意的是,如果一大段英文文字中的空格都使用 ,那么浏览器就无法正确识别出哪个字符才是单词的开始和结束,因而无论如何使用 word-wrap 和 word-break 等控制单词断开或换行的 CSS 属性,最终都很难避免在单词中间断开单词,这也往往不是我们想要的结果。因此如果段落中不同单词之间有大量的连续空格,那么这些连续空格的第一个空格最好使用普通的半角空格,以保证单词之间仍有正常的分隔。

2. 跟随字体大小产生相应空白的空格

这类空格包含 三个空格字符,这三个空格都会根据不同的字体大小产生相应的空白大小,分别是 1/2 em,1em,1/6em(有时被设计成1/5em)宽。其空白大小具体表现如下图:

由于中文是等宽字体,因此和 所产生的空白大小与中文字大小具有明确的比例关系(一个 等于半个中文字的宽度,而一个 则是一个中文字的宽度),因此这类空格很适合用于控制排版,例如:

3. 零宽连字控制空格

即 ‌ 和 ‍ ,这两个空格字符并不会产生空白,仅能控制字符之间是否连字,这两个字符也是“不打印字符”(或称作“控制字符”),即不会影响打印效果的字符,仅作字符特性控制。而所谓的连字,是西方字体中常见的现象,表示两个单独的字母在相连时可以连接为新的字母的现象。例如在德语中,"f" 与 "l" 之间连写会变成一个新字符,整个单词对应的语义也会发生改变或者产生不符合语法的情况。例如:

Auf‌lage(编辑) 是一个德语复合词,由 "auf"(关于) 和 "lage"(位置)两个组成成分构成,在德语语法中,复合词组成成分的边界不能产生连字,因此 "f" 和 "l" 之间不应该连字,如果在 HTML 上直接写入这个单词,直接交由浏览器控制,则会产生如下的效果:

"f" 和 "l" 之间相连了,不符合德语的语法规范,因此需要在两个字母之间插入一个 ‌ 强制不连字,效果如下:

值得注意的是,并不是所有的浏览器都对 ‌ 和 ‍ 敏感,目前 Chrome (44.0.2403.125)中这两个字符并不能产生连字或不连字的控制,而 Safari(8.0.6)中则可以有效控制连字。

最后需要强调的是,虽然 Unicode 中有着各种不同特性的空格可以用于排版,但理论上还是不应该用空格来进行排版,排版应该是 CSS 负责控制的,用于排版的空格并不属于内容但却与内容混排在一起,实际上相当不利于维护。只有当不便于使用 CSS(比如在 EML 中)等特殊情况时才考虑用空格参与排版。

以上所述是小编给大家介绍的HTML不同空格的特性与表现形式(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

更多精彩内容其他人还在看

网页注释在IE中产生文字溢出

实验代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti
收藏 0 赞 0 分享

HTML教程:定义列表

原文:http://andymao.com/andy/post/104.html 上一节:有序列表 写完“无序列表”和“有序列表”之后已经有人和我说这两篇看得没什么意思。这两篇文章如果只以单向读取的形式阅读那么的确是没什
收藏 0 赞 0 分享

HTML教程:有序列表

原文:http://andymao.com/andy/post/103.html 上一节:无序列表 信息有时候是无序归纳的,有的却有着明确的顺序,在上一篇也提到了。那么简单的来想一下身边有哪些事物是有先后顺序的:操作步骤、排行榜、书目录……
收藏 0 赞 0 分享

HTML教程:无序列表

原文:http://andymao.com/andy/post/102.html 段落已经讲完了,那么一些基本的应用方式也讲了一些,那么是否已经应用了呢?当然应用可以更为丰富,那么这些就需要自己在实际工作中不断的摸索与思考,然后创新并总结得出新的应用形式。当然了段落不能当作
收藏 0 赞 0 分享

HTML网页制作的强大8条技巧

  虽然现在有许多网页制作工具能让您轻松地完成工作,但如果使用HTML则可以得到更大控制权,下面介绍几个小技巧。   1。使用<tt>,<i>,<br>语句来控制文字排版比用<pre>好得多。 如: <tt>实用
收藏 0 赞 0 分享

网页表格分割线去除方法

网页表格分割线去除方法。 其实上面的三个表格都有三行三列,隐藏分隔线的诀窍在于rules,察看这三个表格的源代码,我们可以看到<TABLE>标签中都有rules。它有三个参数(cols,rows,none),当rules=cols时,表格会隐藏纵向的分隔线,这
收藏 0 赞 0 分享

blockquote标记应用注意

关于语义化,不是一句两句就能说明白的,而且现在也没有一个官方的很严格的定义。关于<blockquote>没有争议的是: 1.引用一段较长的文字 2.可以使用cite标签或者属性 问题是<blockquote>引用的文字必须使用块级元素将他
收藏 0 赞 0 分享

网页表格表框制作技巧

网页表格表框制作技巧。 -------------------------------------------------------------------------------- 表格边框的显示与隐藏,是可以用frame参数来控制的。请注意它只控制表格的边框图,而不
收藏 0 赞 0 分享

HTML其实就是学习几个重要标记的应用

《这将是一场革命》一文出来以后。得到业界大伙的认同,当然与此同时也得到部分来自内部与外部的挑衅,不过的更加多的是更多人来寻问每一个点的细节。今晚回家很早就睡了,半夜在一个梦中醒来,梦里正在和小学的同学玩一个游戏——“The Next&rdquo
收藏 0 赞 0 分享

移动端专用的meta标签设置大全

不知道有没有人觉得,html的meta标签描述的头部信息特别多,下面这篇文章主要给大家分享介绍了关于移动端专用的meta设置的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧
收藏 0 赞 0 分享
查看更多