在CSS排版场景中，段落首行缩进是提升文本可读性的基础样式需求，常见的实现方式有两种，分别是使用text-indent属性和::first-line伪元素，二者的实现逻辑和效果存在明显区别。
text-indent实现首行缩进
text-indent是CSS中专门用于设置块级元素首行缩进的属性，它的作用对象是整个块级容器的第一行内容，支持长度单位、百分比等取值，兼容性覆盖所有主流浏览器，是实现首行缩进的首选方案。
该属性的取值可以是固定像素、相对单位em，也可以是父容器宽度的百分比，其中使用em单位是最符合排版习惯的做法，因为1em通常等于当前元素的字体大小，缩进两个字符就可以设置为2em。
/* 段落首行缩进2个字符 */
p {
text-indent: 2em;
line-height: 1.6;
font-size: 16px;
}
上述代码会让所有<p>标签的首行自动缩进32像素，也就是两个16px的字符宽度，后续如果修改字体大小，缩进量也会自动跟随调整，不需要手动修改数值。
::first-line伪元素的特性
::first-line是CSS伪元素，用于选中块级元素的第一行文本，但是它的作用是给第一行文本设置样式，而不是控制第一行的位置偏移。很多开发者误以为可以通过这个伪元素设置首行缩进，实际上它并不支持text-indent属性的生效。
根据CSS规范，::first-line伪元素只能应用部分CSS属性，包括字体相关属性、颜色属性、背景属性等，而text-indent不属于可应用的属性范围，因此即使给::first-line设置text-indent，也不会产生任何缩进效果。
/* 错误示例：::first-line无法生效text-indent */
p::first-line {
text-indent: 2em; /* 该属性不会生效 */
color: #333; /* 只有字体颜色等属性会生效 */
}
如果尝试用::first-line实现缩进，反而可能因为样式优先级问题导致整体排版异常，因此不建议用这个伪元素处理首行缩进需求。
两种方式的对比
为了更清晰地展示两种方式的差异，我们可以通过下表对比二者的核心特性：
| 对比项 | text-indent属性 | ::first-line伪元素 |
|---|---|---|
| 核心作用 | 控制块级元素首行位置偏移 | 选中块级元素第一行文本设置样式 |
| 是否支持首行缩进 | 是，原生支持 | 否，text-indent属性不生效 |
| 适用场景 | 所有需要首行缩进的段落排版 | 首行特殊样式（如特殊颜色、字体） |
| 兼容性 | 全浏览器支持 | IE8及以上支持 |
正确的使用场景示例
如果我们需要给段落首行设置特殊颜色，同时实现首行缩进，正确的做法是同时结合text-indent和::first-line，二者各司其职：
/* 正确示例：结合两种方式实现缩进+首行特殊样式 */
p {
text-indent: 2em;
line-height: 1.6;
font-size: 16px;
color: #666;
}
p::first-line {
color: #1a1a1a;
font-weight: bold;
}
上述代码中，text-indent负责实现首行缩进，::first-line负责把首行文字设置为深色加粗，二者互不冲突，最终实现符合预期的排版效果。
注意事项
- text-indent只能作用于块级元素，行内元素设置该属性不会生效，需要先设置display为block或inline-block。
- ::first-line伪元素只对块级元素生效，行内元素无法使用该伪元素选中第一行内容。
- 如果段落第一行内容因为容器宽度变化发生换行，::first-line选中的内容会自动跟随新的第一行变化，而text-indent始终作用于整个元素的第一行。
- 避免给::first-line设置text-indent属性，该设置不会生效还会增加无意义的样式代码。
总结来说，实现段落首行缩进应该使用text-indent属性，::first-line伪元素的作用是给首行文本设置特殊样式，不能用来实现缩进效果，二者结合使用可以满足更复杂的排版需求。
CSS::first-line首行缩进text_indent修改时间：2026-07-03 02:48:22