在HTML5页面的文本排版场景中，文本缩进是提升内容可读性的常用操作，开发者可以通过CSS的text-indent属性或者pre标签两种方式实现不同的缩进效果，两种方案各有适用的场景。
一、使用CSS text-indent属性设置缩进
text-indent是CSS中专门用于控制文本块首行缩进的属性，适用于大多数普通文本内容的缩进需求，支持多种单位设置缩进量。
1. 基础用法
text-indent可以直接作用于块级元素，设置首行的缩进距离，常见的单位有px、em、rem等，其中em是相对单位，会根据当前元素的字体大小自适应调整，更适合响应式场景。
/* 设置段落首行缩进2个字符，1em通常对应1个字符的宽度 */
p {
text-indent: 2em;
}
2. 负缩进与悬挂缩进
text-indent也支持设置负值，实现悬挂缩进的效果，比如让首行突出，其余行缩进，常用于列表项或者特殊排版场景。
/* 悬挂缩进效果，首行突出20px，其余行缩进 */
.list-item {
text-indent: -20px;
padding-left: 20px;
}
3. 注意事项
- text-indent仅对块级元素生效，行内元素设置该属性不会生效
- 缩进值会被继承，如果父元素设置了text-indent，子块级元素默认会继承该属性，需要单独重置
- 如果文本内有行内块元素或者图片，缩进计算会包含这些元素的位置
二、使用pre标签设置缩进
pre标签是HTML5的原生标签，作用是保留文本中的空格、换行、制表符等原有格式，不需要额外CSS就可以实现缩进效果，适合展示代码、诗歌等需要保留原始格式的内容。
1. 基础用法
直接在pre标签内部输入带缩进的文本，浏览器会原样渲染，不会合并多余的空格和换行。
<pre>
这是首行缩进的内容
这是二级缩进的内容
这是回到一级缩进的内容
</pre>
2. 结合CSS优化pre标签样式
pre标签默认会使用等宽字体，并且不会自动换行，实际使用中通常会配合CSS调整样式，让内容适配页面宽度。
pre {
/* 设置自动换行，避免内容溢出容器 */
white-space: pre-wrap;
/* 设置合适的字体大小 */
font-size: 14px;
/* 添加内边距优化显示效果 */
padding: 10px;
background-color: #f5f5f5;
}
3. 适用场景
- 展示代码片段，保留代码的原有缩进格式
- 诗歌、歌词等需要严格保留换行和空格的内容排版
- 需要原样展示用户输入的带格式文本的场景
三、两种方案的对比
开发者可以根据实际需求选择合适的缩进方案，两者的核心区别如下：
| 对比项 | CSS text-indent | pre标签 |
|---|---|---|
| 适用内容 | 普通段落、文章正文等流式文本 | 代码、诗歌等需要保留原始格式的内容 |
| 缩进控制 | 仅控制首行缩进，可自定义缩进量 | 保留所有空格和换行，手动控制缩进 |
| 空格处理 | 默认合并连续空格，仅首行生效缩进 | 保留所有空格和换行，不合并 |
| 继承性 | 会被子元素继承 | 不会继承格式，仅保留内部文本原有格式 |
四、常见问题解答
1. text-indent对行内元素无效怎么办？
可以将行内元素设置为display: block或者display: inline-block，转换为块级或者行内块元素后再设置text-indent属性。
span {
display: inline-block;
text-indent: 2em;
}
2. pre标签内容太长溢出容器怎么处理？
可以给pre标签添加white-space: pre-wrap属性，让内容在容器宽度不足时自动换行，避免横向滚动条出现。
3. 能不能同时使用两种方案？
可以，比如在pre标签内部再给文本设置text-indent，不过通常没有这个必要，pre标签已经可以保留手动输入的缩进格式，重复设置反而可能造成排版混乱。
HTML5text-indentpre标签CSS文本缩进修改时间：2026-07-12 00:39:22