CSS 文本间距
CSS 文本间距详解 · 难度：入门 · +10XP
CSS 文本间距详解
CSS 提供了多个属性来控制文本和字符之间的间距，包括字间距（letter-spacing）、词间距（word-spacing）、行高（line-height）、首行缩进（text-indent）和空白处理（white-space）。合理的文本间距能显著提升可读性。
字间距 letter-spacing
letter-spacing 控制字符之间的间距。可以增大（正值）或缩小（负值）。
h1 {
letter-spacing: 2px; /* 增加字距，适合标题 */
}
h2.tight {
letter-spacing: -1px; /* 紧凑字距，适合特大字体 */
}
p {
letter-spacing: normal; /* 默认值（0） */
}
/* 英文大写字母通常需要增加字距 */
.uppercase-heading {
text-transform: uppercase;
letter-spacing: 3px;
font-size: 14px;
}词间距 word-spacing
word-spacing 控制单词之间的间距（主要影响英文等以空格分词的文本）。
p.normal { word-spacing: normal; }
p.wide { word-spacing: 5px; }
p.tight { word-spacing: -2px; }
p.custom { word-spacing: 0.2em; } /* 相对单位 */行高 line-height
line-height 设置文本行与行之间的高度。推荐使用无单位数字，因为它会继承计算后的值而非比例。
body {
line-height: 1.6; /* 推荐：无单位数字 */
font-size: 16px;
}
p.article {
line-height: 1.8; /* 长文本需要更大的行高 */
}
h1 {
line-height: 1.2; /* 标题行高可以紧凑一些 */
}
首行缩进 text-indent
text-indent 设置段落第一行的缩进距离。
p {
text-indent: 2em; /* 缩进两个字符宽度 */
}
p.no-indent {
text-indent: 0; /* 不缩进 */
}
p.negative {
text-indent: -20px; /* 负值：悬挂缩进 */
padding-left: 20px; /* 配合左边距使用 */
}空白处理 white-space
white-space 控制元素内空白字符（空格、换行）的处理方式。
| 值 | 空格合并 | 自动换行 | 适用场景 |
|---|---|---|---|
| normal | 合并 | 换行 | 默认行为 |
| nowrap | 合并 | 不换行 | 导航栏、省略号文本 |
| pre | 保留 | 不换行 | 显示代码块 |
| pre-wrap | 保留 | 换行 | 用户生成内容展示 |
| pre-line | 合并 | 换行 | 保留换行的段落 |
| break-spaces | 保留 | 换行 | 与 pre-wrap 类似但处理不同 |
/* 单行省略 */
.text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 保留代码格式 */
.code-block {
white-space: pre-wrap;
font-family: monospace;
}
文本间距属性速查表
| 属性 | 作用 | 常用值 | 示例 |
|---|---|---|---|
| letter-spacing | 字符间距 | px / em / normal | letter-spacing: 2px; |
| word-spacing | 单词间距 | px / em / normal | word-spacing: 4px; |
| line-height | 行高 | 数值 / px / % | line-height: 1.6; |
| text-indent | 首行缩进 | px / em / % | text-indent: 2em; |
| white-space | 空白处理 | normal / nowrap / pre-wrap | white-space: nowrap; |
???? 练习
- 使用 letter-spacing 为一个英文标题创建视觉间距效果
- 将长文章段落的 line-height 设置为 1.8 并与 1.2 对比阅读体验
- 使用 white-space: nowrap + text-overflow: ellipsis 实现单行文本截断
- 用 text-indent: 2em 为段落添加传统中文排版的首行缩进
- 使用 word-spacing 调整英文段落单词之间的间距，并观察效果