html⼀段⽂字不同⼤⼩，探讨HTML不同空格的特性与表现形式
（推荐）
⼀. 概要
在编写 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" 之间由于有 的连接，由于 不会被打断，因⽽浏览器会认为它们是相连的⼀个完整单词，在位置允许的情况下把它们同时换到下⼀⾏。
html中的5种空格表示
需要注意的是，如果⼀⼤段英⽂⽂字中的空格都使⽤ ，那么浏览器就⽆法正确识别出哪个字符才是单词的开始和结束，因⽽⽆论如何使⽤word-wrap 和 word-break 等控制单词断开或换⾏的 CSS 属性，最终都很难避免在单词中间断开单词，这也往往不是我们想要的结果。因此如果段落中不同单词之间有⼤量的连续空格，那么这些连续空格的第⼀个空格最好使⽤普通的半⾓空格，以保证单词之间仍有正常的分隔。
2. 跟随字体⼤⼩产⽣相应空⽩的空格
这类空格包含 三个空格字符，这三个空格都会根据不同的字体⼤⼩产⽣相应的空⽩⼤⼩，分别是 1/2 em，1em，1/6em(有时被设计成1/5em)宽。其空⽩⼤⼩具体表现如下图：
由于中⽂是等宽字体，因此和 所产⽣的空⽩⼤⼩与中⽂字⼤⼩具有明确的⽐例关系(⼀个 等于半个中⽂字的宽度，⽽⼀个 则是⼀个中⽂字的宽度)，因此这类空格很适合⽤于控制排版，例如：
3. 零宽连字控制空格
即 和 ，这两个空格字符并不会产⽣空⽩，仅能控制字符之间是否连字，这两个字符也是“不打印字符”(或称作“控制字符”)，即不会影响打印效果的字符，仅作字符特性控制。⽽所谓的连字，是西⽅字体中常见的现象，表⽰两个单独的字母在相连时可以连接为新的字母的现象。例如在德语中，"f" 与 "l"
之间连写会变成⼀个新字符，整个单词对应的语义也会发⽣改变或者产⽣不符合语法的情况。例如：
Auf l age(编辑) 是⼀个德语复合词，由 "auf"(关于) 和 "lage"(位置)两个组成成分构成，在德语语法中，复合词组成成分的边界不能产⽣连字，因此 "f" 和 "l" 之间不应该连字，如果在 HTML 上直接写⼊这个单词，直接交由浏览器控制，则会产⽣如下的效果：
"f" 和 "l" 之间相连了，不符合德语的语法规范，因此需要在两个字母之间插⼊⼀个 强制不连字，效果如下：
值得注意的是，并不是所有的浏览器都对 和 敏感，⽬前 Chrome (44.0.2403.125)中这两个字符并不能产⽣连字或不连字的控制，⽽Safari(8.0.6)中则可以有效控制连字。
最后需要强调的是，虽然 Unicode 中有着各种不同特性的空格可以⽤于排版，但理论上还是不应该⽤空格来进⾏排版，排版应该是 CSS 负责控制的，⽤于排版的空格并不属于内容但却与内容混排在⼀起，实际上相当不利于维护。只有当不便于使⽤ CSS(⽐如在 EML 中)等特殊情况时才考虑⽤空格参与排版。
以上所述是⼩编给⼤家介绍的HTML不同空格的特性与表现形式(推荐)，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对脚本之家⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。