HTML空格显示问题

实际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解决即可。

参考文档