配了多年首行缩进，今天才知道换行后的行从来没被 CSS 认过——text-indent 三个关键字把这件事彻底扳过来了

配了多年首行缩进，今天才知道换行后的行从来没被 CSS 认过——text-indent 三个关键字把这件事彻底扳过来了。

text-indent 是 CSS 里最老的属性之一，大多数人只用过它的默认值：让段落第一行缩进两个字符。But the spec 定义了三个关键字，其中两个长期没有被浏览器实现——直到 2026 年 Baseline 才全部落地。

text-indent 的三个关键字

• each-line：缩进第一行，以及每个强制换行后的行（包括 <br> 换行和 display: block 的子元素）
• hanging：反转缩进方向——首行不缩进，后续所有行缩进（常用于参考文献、发票列表）
• both：each-line + hanging 的组合

Before（each-line 和 hanging 未实现）：

/* 想让换行后的行也缩进？CSS 层面完全做不到 */
.verse p {
  text-indent: 2em; /* 只有第一行缩进，换行后的行不受影响 */
}

After（Chrome 152+ / Baseline 2026）：

/* 诗歌/歌词场景：每行都缩进，换行符后继续缩进 */
.verse p {
  text-indent: 2em each-line;
}

/* 参考文献场景：首行不缩进，其余行悬挂缩进 */
.bibliography p {
  text-indent: -2em;
  padding-left: 2em;
  text-indent: hanging;
}

完整参考文献示例：

<div class="bibliography">
  <p>[1] Smith, J. (2026). "Understanding CSS text-indent", Journal of Web Standards.</p>
  <p>[2] Doe, A. (2026). "Baseline 2026 and the CSS features you missed", Web Dev Quarterly.</p>
</div>

.bibliography p {
  text-indent: -3em;  /* 负值配合 hanging */
  padding-left: 3em;
  text-indent: hanging; /* 悬挂缩进：除第一行外全部缩进 */
  margin-bottom: 0.5em;
}

效果：第一行对齐左边界（因为 hanging），[1][2] 编号突出；其余行正常缩进，整体对齐美观。

为什么之前不能用

each-line 需要浏览器在渲染时识别强制换行符（<br>、块级子元素），这在 CSS 渲染模型里长期是实现盲区。hanging 本身逻辑简单，但需要和 text-indent 的负值场景配合，spec 早期没有明确行为细节。两者都在 CSS Text Module Level 4 规范下，2026 年 1 月随 Baseline 2026 完成三大引擎实现。

和 text-indent: all 配合

text-indent: all 是另一个长期存在的关键字，让 text-indent 也作用于 ::first-letter 伪元素的首字符（常用于大型首字母装饰场景）：

.dropcap p::first-letter {
  font-size: 3em;
  float: left;
  text-indent: 0;
}
.dropcap p {
  text-indent: 0; /* 先重置 */
  text-indent: all; /* 再让 text-indent 也作用于 ::first-letter */
}

规范与浏览器支持

CSS Text Module Level 4 的 text-indent: each-line / hanging / all 于 2026 年 1 月随 Baseline 2026 进入 Newly Available，Chrome、Firefox、Safari 三大引擎全部支持。规范地址：https://www.w3.org/TR/css-text-4/#text-indent-property。

接下来可以做什么

检查页面上是否有参考文献、票据列表、条款清单——把 text-indent: hanging 应用上去，负值 + 悬挂缩进，以前靠 margin-left + 手动首行不缩进实现的效果，现在 CSS 一行搞定。