空格

更新时间:2023-03-08 11:29:08 阅读：评论：0

钓鱼看漂-青海湖鸟岛

2023年3月8日发(作者：后踢)

HTML中空格占位符的⼏种⽅式

⼀、使⽤全⾓空格

全⾓空格被解释为汉字，所以不会被被解释为HTML分隔符，可以按照实际的空格数显⽰。

⼆、使⽤空格的替代符号

替代符号就是在需要显⽰空格的地⽅加⼊替代符号，这些符号会被浏览器解释为空格显⽰。

空格的替代符号有以下⼏种：

名称编号描述

不断⾏的空⽩（1个字符宽度）

半个空⽩（1个字符宽度）

⼀个空⽩（2个字符宽度）

窄空⽩（⼩于1个字符宽度）

可以⽤名称或编号作为空格的替代符号，名称必须⼩写，末尾的“;”不能省略。

如：

欢迎光临！

显⽰效果为：欢迎光临！

三、使⽤CSS的white-space属性

CSS的white-space属性⽤于设置⽂本中空格的处理⽅式，当white-space属性取值为pre时，浏览器会保留⽂本中的空格和换⾏，这样你

就可以直接在⽂本中使⽤空格和回车了。

这种⽅法特别适合于在⽹页中显⽰程序代码。⽐如：显⽰⼀段C程序代码。

intsub(intx,inty){intz;if(x>y)z=x-y;elz=y-x;returnz;}

显⽰效果为：

intsub(intx,inty){intz;if(x>y)z=x-y;elz=y-x;returnz;}

使⽤HTML的

标签也可以达到类似的效果，但标签有⼀些不太好的特性，不如使⽤CSS的white-space属性更⽅便。

四、使⽤CSS的letter-spacing属性

CSS的letter-spacing属性⽤于设置⽂本中字符之间的间隔，它的取值可以是⼀个带单位的长度值，浏览器会在字和字之间设置指定长度的

空⽩。⽐如：

欢迎光临！

显⽰效果为：

欢迎光临！

注意，如果⽂本中有英⽂单词，则空⽩会加在字母之间，⽽不是单词之间。

五、使⽤CSS的word-spacing属性

CSS的word-spacing属性⽤于设置⽂本中单词之间的间隔，它的取值可以是⼀个带单位的长度值，浏览器会在单词和单词之间设置指定长

度的空⽩。⽐如：

Happynewyear!

显⽰效果为：

Happynewyear!

注意，HTML是以空格来区分单词的，它会把单词间的空⽩按指定长度显⽰。

六、使⽤CSS的text-indent属性

CSS的text-indent属性⽤于设置⾸⾏缩进，它的取值可以是⼀个带单位的长度值，浏览器会在段落的⾸⾏开始处设置指定长度的空⽩。⽐

如：

欢迎光临！