如何通过::first-line伪元素在HTML中定制首行文本样式？

本文共计903个文字，预计阅读时间需要4分钟。

first-line 属性只对块级元素生效，且仅支持有限的 CSS 属性。使用时，请注意选择合适的属性，避免错误选择器或嵌套使用。

必须用块级元素包裹文本

浏览器只会在渲染完成、文本自动换行后，才识别哪一行是“第一行”。这个过程依赖块格式化上下文（BFC），所以 ::first-line 只能作用于 <p>、<div>、<section> 等默认 display: block 的元素。

常见错误包括：

• 给 <span class="intro">... 加 .intro::first-line —— 无效，因为 <span> 是内联元素
• 用 display: inline 强制改写块元素 —— 会直接让 ::first-line 失效
• 内容为空或只有空白符（如全空格、<br>）—— 浏览器无法计算首行，样式不触发

可用属性比你想象中少得多

::first-line 不是普通选择器，它受规范严格限制。