文字中间保留空白的几种方式

方法一：css属性 white-space

<p style="white-space: pre;">姓    名</p>

兼容性：IE8 以下不支持。

方法二：html pre 标签

<pre><p>姓    名</p></pre>

HTML <pre> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在 <pre> 开始标签后的换行符也会被省略)

 上述引用地址为：html pre标签

方法三：html 空格

• &nbsp; 不换行空格，由space键产生，不累加，宽度受字体影响明显而强烈。
• &ensp;半角空格，宽度为字体宽度一半（小写n的宽度），透明，不受字体影响，性能比较稳健。（推荐）
• &emsp;全角空格，透明，宽度为字体宽度，不受字体影响，性能比较稳健。（推荐）
• &thinsp; 窄空格，1 / 6 em。
• &zwnj;零宽不连字，不打印字符。
• &zwj;零宽连字，不打印字符。

方法四：JS空格

• xao，不间断空格字符串（拉丁字符集）。
• &#32，ASCII字符，只一个有效。
• \u0020，unicode字符。
• &#x20，标准键盘码值表（16进制），只一个有效。
• %20，URI编码。
• \t tab键，四个空格。