17370845950

::first-line伪元素不能实现首行缩进，因其不支持text-indent等缩进属性；正确做法是直接对块级段落元素（如p）设置text-indent。

段落首行缩进不能用 ::first-line 伪元素实现——它不接受 text-indent，也不支持设置缩进量。

为什么 ::first-line 不能用来做首行缩进

::first-line 仅能控制首行的字体、颜色、背景等继承性样式，text-indent 被明确列为「不生效属性」。浏览器会忽略对它的设置，且无任何警告。

• 常见错误写法：

  div::first-line { text-indent: 2em; }

  → 完全无效
• 即使加上 !important 或换用 margin-left，也无法让首行“向内缩”
• ::first-line 的作用范围是「首行中所有可渲染文本内容」，不是「首字符前的空白区域」

正确做法：直接用 text-indent 设置段落

标准、兼容、语义清晰的方式就是给 p 或其他段落容器设 text-indent：

p {
  text-indent: 2em;
}

• 2em 是中文排版常用值（约两个汉字宽度），也可用 1em、20px 等
• 该属性只影响第一行开头，后续行不受影响
• 若想取消首段缩进（如文章标题后第一段），可单独加类：

  .no-indent { text-indent: 0; }

需要兼容 IE8 或处理 inline 元素时的注意点

老版本 IE 对 text-indent 在某些 inline 上表现异常，但只要作用在块级元素（p、div、

• 避免写成：

  span { text-indent: 2em; }

  → 大概率不生效，因为 span 默认是 inline
• 如果容器是 display: inline-block 或 flex，text-indent 也会失效
• 确保目标元素有明确的 width 或处于正常文档流中，否则缩进可能被裁剪或错位

真正要小心的是「误以为 ::first-line 可控缩进」这个认知偏差——它常出现在搜索“首行缩进 css 伪类”这类关键词时的误导结果。实际排版中，text-indent 就是唯一该用的属性。