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