HTML空格显示问题
·
2 min read
实际WEB中看到有些人习惯这么控制一些字符实体来空格展示
hello world,个人觉得并不好，这里来简单解释下。
因为HTML是标签语言，也就是代码，HTML中有些字符是保留字符空格，大于，小于号，就类似于正则中的/ . 都是保留字符，但有时我们想要这些字符的文本展示，怎么做呢，HTML给出的方案是输入字符实体，比如空格就是 。
注意
- 这是一个英文空格
- 的全称是
non-breaking space - 实体名称对大小写敏感！
等价写法
比如在React项目中，因为JSX 本身还是JS，所以我们可以用变量来表示空格，比如hello{' '}world,实际上与hello world是等价的
10个空格？
细心的同学会注意到文本空格，hello{' '}world结果仍然是1个空格，为啥?因为浏览器总是会截断HTML页面中的空格的数量，如果想显示10个空格，你需要使用10个字符实体 .
弊端
无论是使用{’ ‘},还是 坏处是，这个空格显示的宽度是会随着字体的不同而不同的，另外一个弊端是，假如10个，20个，完全不如用CSS控制的更为精准和灵活。
该如何做
个人认为
- 如果只是一个简单的空格，并且字体带来的差异符合预期，则使用文本空格 {’ ‘}即可，因为足够的简单，毕竟这个也是code的一部分
- 假如空格很多，OK，请考虑CSS解决即可。
