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

2020-04-16 21:52:28易采站长站整理

一. 概要

在编写 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)宽。其空白大小具体表现如下图: