在前端的页面编写中，使用空格占位符是非常常见的，特别是在表单label或者产品属性时，合理的空格占位符使用，能够让页面布局变得美观匀称。
抄录于小宇蜀黍的偏爱文档
针对于这个需求做些记录于说明
面对【厂 家】【禁 忌】这类效果时，第一感觉没啥特别的，十秒钟肯定搞定。
HTML中的方案
在HTML中，提到空格占位符很容易想到“  ;”，其实HTML提供了5种空格实体（space entity）。我们先一起来了解下。【Vue中解决方案可直接跳过看二】 每种空格实体拥有不同的宽度，非断行空格（  ;）是常规空格的宽度，可运行于所有主流浏览器。其他几种空格（ &ensp ;、 &emsp ;、 &thinsp ;、 &zwnj ;、&zwj ;）在不同浏览器中宽度各异。
1、【 】;
它叫不换行空格，全称No-Break Space，它是最常见和我们使用最多的空格，大多数的人可能只接触了 ，它是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用html实体表示才可累加，该空格占据宽度受字体影响明显而强烈。
2、【&ensp】;
它叫“半角空格”，全称是En Space，en是字体排印学的计量单位，为em宽度的一半。根据定义，它等同于字体度的一半（如16px字体中就是8px）。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性：透明的，此空格有个相当稳健的特性，就是其占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。
3、【&emsp】;
它叫“全角空格”，全称是Em Space，em是字体排印学的计量单位，相当于当前指定的点数。例如，1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性：透明的，此空格也有个相当稳健的特性，就是其占据的宽度正好是1个中文宽度，而且基本上不受字体影响。
4、【&thinsp】;
它叫窄空格，全称是Thin Space。我们不妨称之为“瘦弱空格”，就是该空格长得比较瘦弱，身体单薄，占据的宽度比较小。它是em之六分之一宽。
5、【&zwnj】;
它叫零宽不连字，全称是Zero Width Non Joiner，简称“ZWNJ”，是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，而是以这两个字符原本的字形来绘制。Unicode中的零宽不连字字符映射为“”（zero width non-joiner，U+200C），HTML字符值引用为： ‌ ;
6、【&zwj】;
它叫零宽连字，全称是Zero Width Joiner，简称“ZWJ”，是一个不打印字符，放在某些需要复杂排版语言（如阿拉伯语、印地语）的两个字符之间，使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D (HTML: ‍ ; &zwj ;）。 此外，浏览器还会把以下字符当作空白进行解析：空格（  ;）、制表位（	 ;）、换行（
 ;）和回车（
 ;）还有（　 ;）等等。 针对　 ;我再来展开介绍一下它的兄弟们：
【  ;】普通的英文半角空格
【  ;】普通的英文半角空格但不换行，等同  ;、  ;、no-break space
【　 ;】中文全角空格 （一个中文宽度）
【  ;】空格（半个中文宽度）等同&ensp ;、en
【  ;】空格 （一个中文宽度）等同&emsp ;、em
【  ;】空格 （四分之一中文宽度）等同四分之一em
所以，面对UI设计，我的脑海中马上出现了代码：
<div>【厂  家】</div>
或者
<div>【厂　　家】</div>
这在HTML中必然是没有问题的，可是面对Vue运行的结果，我凌乱了。
过分的是，页面好像把我的空格占位符解析成了英文空格，我寻思，会不会字符串模板无法正确解析？于是，我眉头一皱，计上心头，直接传入HTML。
v-html
我们知道普通模板使用会将数据解析成普通文本，而非HTML 代码。为了输出真正的 HTML，很自然想到 v-html 指令。 于是，继续HTML空格实体的思路，修改下代码：
<div v-html=”’ 【厂  家】’” ></div>
<div v-html=”’ 【厂　　家】’”></div>
看看结果
这就是我要的滑板鞋！既然实现了需求，看来一切都结束了，可是仅此而已吗？ 其实对于v-html，一直是被妖魔化的，开发者的结论往往都是能不用就不用，用也绝不能相信用户提供的内容插值，这是xss的心里在作祟。至于什么是跨站脚本攻击，不是本文我们要讨论的重点。但因此延伸出一个尝试：不用v-html能否实现空格占位符？答案是肯定的，就当是结尾彩蛋大放送了。
CSS
作为一个前端开发者，还是要承认，很多冷门的样式未必使用过，那这里说的这个方案就是text-align：justify，我们直接来看代码和效果。
【<div class=”title”>厂家</div>】
.title {
text-align: justify;
width: 56px;
height: 25px;
display: inline-block;
vertical-align: top;
}
.title::after {
width: 100%;
display: inline-block;
content: ‘’
}
至于这里为什么要把【】放到
<div class=”title”>厂家</div>
的外面，主要还是为了防止【】连带我们要填充的文字一块被拉伸，造成如下惨剧。
