在前端的页面编写中，使用空格占位符是非常常见的，特别是在表单label或者产品属性时，合理的空格占位符使用，能够让页面布局变得美观匀称。

抄录于小宇蜀黍的偏爱文档

面对【厂 家】【禁 忌】这类效果时，第一感觉没啥特别的，十秒钟肯定搞定。

在HTML中，提到空格占位符很容易想到“ ;”，其实HTML提供了5种空格实体（space entity）。我们先一起来了解下。【Vue中解决方案可直接跳过看二】 每种空格实体拥有不同的宽度，非断行空格（ ;）是常规空格的宽度，可运行于所有主流浏览器。其他几种空格（ &ensp ;、 &emsp ;、 &thinsp ;、 &zwnj ;、&zwj ;）在不同浏览器中宽度各异。

它叫不换行空格，全称No-Break Space，它是最常见和我们使用最多的空格，大多数的人可能只接触了 ，它是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用html实体表示才可累加，该空格占据宽度受字体影响明显而强烈。

它叫“半角空格”，全称是En Space，en是字体排印学的计量单位，为em宽度的一半。根据定义，它等同于字体度的一半（如16px字体中就是8px）。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性：透明的，此空格有个相当稳健的特性，就是其占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。

  它叫“全角空格”，全称是Em Space，em是字体排印学的计量单位，相当于当前指定的点数。例如，1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性：透明的，此空格也有个相当稳健的特性，就是其占据的宽度正好是1个中文宽度，而且基本上不受字体影响。

它叫窄空格，全称是Thin Space。我们不妨称之为“瘦弱空格”，就是该空格长得比较瘦弱，身体单薄，占据的宽度比较小。它是em之六分之一宽。

它叫零宽不连字，全称是Zero Width Non Joiner，简称“ZWNJ”，是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，而是以这两个字符原本的字形来绘制。Unicode中的零宽不连字字符映射为“”（zero width non-joiner，U+200C），HTML字符值引用为： ‌ ;

它叫零宽连字，全称是Zero Width Joiner，简称“ZWJ”，是一个不打印字符，放在某些需要复杂排版语言（如阿拉伯语、印地语）的两个字符之间，使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D (HTML: ‍ ; &zwj ;）。 此外，浏览器还会把以下字符当作空白进行解析：空格（ ;）、制表位（ ;）、换行（ ;）和回车（ ;）还有（　 ;）等等。 针对　 ;我再来展开介绍一下它的兄弟们：

所以，面对UI设计，我的脑海中马上出现了代码：

或者

这在HTML中必然是没有问题的，可是面对Vue运行的结果，我凌乱了。

过分的是，页面好像把我的空格占位符解析成了英文空格，我寻思，会不会字符串模板无法正确解析？于是，我眉头一皱，计上心头，直接传入HTML。

我们知道普通模板使用会将数据解析成普通文本，而非HTML 代码。为了输出真正的 HTML，很自然想到 v-html 指令。 于是，继续HTML空格实体的思路，修改下代码：

看看结果

这就是我要的滑板鞋！既然实现了需求，看来一切都结束了，可是仅此而已吗？ 其实对于v-html，一直是被妖魔化的，开发者的结论往往都是能不用就不用，用也绝不能相信用户提供的内容插值，这是xss的心里在作祟。至于什么是跨站脚本攻击，不是本文我们要讨论的重点。但因此延伸出一个尝试：不用v-html能否实现空格占位符？答案是肯定的，就当是结尾彩蛋大放送了。

作为一个前端开发者，还是要承认，很多冷门的样式未必使用过，那这里说的这个方案就是text-align：justify，我们直接来看代码和效果。

至于这里为什么要把【】放到

的外面，主要还是为了防止【】连带我们要填充的文字一块被拉伸，造成如下惨剧。