在 CSS 中添加空格符号有四种方法:HTML 实体字符(如 和 )、文本属性(如 white-space 和 word-spacing)、CSS 函数(如 calc(1em) 和 space(1))以及伪元素(如 ::after)。

在 CSS 中添加空格符号
在 CSS 中添加一个空格符号(空格、换行符或制表符)有几种方法:
1. HTML 实体字符
使用 HTML 实体字符是添加空格的常见方法:
立即学习“前端免费学习笔记(深入)”;
-
: 实体表示非换行空格(将文本分开但不换行)。 -
: 实体也可以表示非换行空格。 -
: 实体表示半角空格(略宽于非换行空格)。 -
: 实体表示非断开空格(比半角空格稍窄)。 -
: 实体表示细空格(比非断开空格更窄)。
2. 文本属性
可以利用文本属性控制空格,例如:
-
white-space:此属性控制单词和行的空格处理方式。例如,white-space: nowrap;阻止单词换行。 -
word-spacing:此属性设置单词之间的间距。 -
letter-spacing:此属性设置字母之间的间距。
3. CSS 函数
CSS 函数可以生成空格,例如:
-
calc(1em):创建一个 1em 的空格。 -
space(1):创建一个相对于父元素宽度的 1% 间隙。
4. 伪元素
可以使用伪元素为容器添加空格,例如:
-
::after:在元素后添加内容,例如:::after { content: " "; }。
示例
HTML:
这是 一个 带空格 的文本。
CSS:
p {
word-spacing: 1em;
letter-spacing: 0.5em;
}输出:
这是 一个 带 空格 的 文本。










