::first-line 不适用于标题（h1–h6），因其依赖块级文本流和稳定行盒，而标题常被设为 white-space: nowrap、嵌套在 flex/grid 中、含图标或伪元素，导致首行范围无法确定；它仅可靠用于 p、div 等纯文本块容器，且不响应动态内容更新。
::first-line 不能用于标题（h1–h6）的“自适应排版问题”——它在语义和行为上都不适合做标题样式控制，强行使用反而导致不可控漂移、响应式错位或静默失效。
为什么 h1::first-line 在标题场景下基本不可靠
标题元素（h1–h6）天然单行居多，且常被设为 white-space: nowrap、display: inline-flex 或配合图标/徽章布局。一旦触发以下任一条件，::first-line 就不再选中“你认为的第一行”：
- 父容器是
flex或grid—— 标题常嵌套其中，直接切断块级文本流 - 标题内含
span、svg或伪元素::before/::after—— 行盒（line box）被拆分，首行范围无法稳定计算 - 用了
text-overflow: ellipsis或overflow: hidden—— 浏览器可能不生成完整行盒，伪元素无内容可绑定 - 字体加载延迟（尤其自定义字体）—— 首次渲染时按 fallback 字体计算首行，重排后样式不自动更新
::first-line 真正能稳住的场景只有纯段落文本
它唯一被规范保障的行为，是作用于 p、div（display: block）、blockquote 这类**纯文本块容器**的视觉首行。例如：
p.intro::first-line {
font-weight: 600;
letter-spacing: 0.03em;
text-transform: lowercase;
}
但注意：letter-spacing 虽在部分浏览器中“看似生效”，实则属于非标准支持项——CSS 规范明确将其列为 ::first-line 的禁用属性，Chrome/Firefox 当前允许是兼容性妥协，Safari 16.4+ 已开始静默忽略。别把它当可靠手段。
标题首行效果该用什么替代
真正要解决标题在不同屏幕下的首行强调问题，应放弃 ::first-line，改用更可控、可预测的方案：
- 语义化包裹：把标题中需强调的部分显式包进
<span class="lead"></span>，再统一控制.lead的font-weight、color和letter-spacing—— 它不随换行漂移，也不依赖渲染时机 - 响应式字号缩放：用
font-size: clamp(1.25rem, 4vw, 2rem)配合line-height: 1.2，让标题整体缩放，避免“只调首行”带来的视觉割裂 - 文字截断 + 视觉补偿：若必须单行显示，用
text-overflow: ellipsis+max-lines: 1（配合display: -webkit-box），再通过border-bottom或box-shadow模拟首行强调感 - JS 辅助（仅限强需求）：监听
resize和fontload，用getClientRects()获取首行 DOM 范围，动态插入span—— 但代价是重排开销和 SSR 不友好
最易被忽略的细节：它根本不响应内容更新
哪怕你用 React/Vue 动态修改了标题文本，::first-line 的样式也不会重算。它只在初始 layout 阶段识别一次。而标题恰恰是 CMS、i18n、A/B 测试中最常动态变更的内容类型。这种“写完就忘”的行为，在标题场景下不是特性，是缺陷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
