::first-line 对 display: inline 元素无效，因该伪元素依赖行盒（line box）生成，而 inline 元素不创建独立行盒，仅嵌入父级块容器的行盒中流动；只有 display: block、table-cell、list-item 等能建立块级格式化上下文并支持内联换行的值才有效。
为什么 ::first-line 对 display: inline 元素完全无效
因为浏览器根本不为 inline 元素生成「行盒（line box）」，而 ::first-line 的作用前提就是挂载在能参与文本流、可形成行盒的块级上下文中。
::first-line 的触发依赖行盒，不是靠 CSS 选择器“硬选”
它不是像 :hover 那样监听状态，也不是像 .class 那样匹配 DOM 节点——它的生效需要底层渲染引擎先构造出一个行盒，再从中截取视觉上最顶部那一行的文字范围。而 display: inline 元素本身不生成独立的行盒，它只是嵌入到父级块容器的行盒里流动。
常见错误现象：span::first-line { color: red; } 写了但 DevTools 的 Computed 面板里压根看不到这条规则，说明浏览器连解析都跳过了。
- 即使给
span加了display: inline-block，它仍不满足条件：inline-block 会生成自己的块框（block formatting context），但内部若无块级上下文包裹，依然无法触发::first-line -
a、em、strong这类天然inline元素，直接写a::first-line永远不会生效 - Vue/React 中用
<span class="title"></span>渲染标题，哪怕内容很长，只要没显式设display: block，伪元素就静默失效
哪些 display 值能真正触发 ::first-line
只有能建立「块级格式化上下文」且允许内联内容自然换行的显示类型才支持。关键不是“看起来像一块”，而是“渲染模型是否生成行盒”。
立即学习“前端免费学习笔记（深入）”；
安全可用的值：
-
display: block（p、div、section默认即此） -
display: table-cell（兼容性好，但需注意父级是table或inline-table） -
display: list-item（如li，前提是内容为纯文本或内联节点）
明确不支持的值：
-
display: inline、display: inline-flex、display: inline-grid -
display: flex、display: grid（整个容器都不生成行盒，子元素再设block也救不回来） -
display: none、display: contents（前者无渲染，后者不生成框，均无首行可言）
容易被忽略的干扰点：文本结构比 display 更隐蔽
就算 display 正确，以下情况也会让 ::first-line “看起来没生效”，实际是首行判定失败：
- 段落开头有
\u200B（零宽空格）或\u3000（中文全角空格）——它们会被算作“首行第一个字符”，但不可见，导致样式应用了却看不见效果 - 首行实际由
<img alt="为什么CSS的::first-line伪元素无法应用于display为inline的元素？" >、<svg></svg>或<div> 占位，后续文字被挤到第二行，此时“首行”为空 <li>父级设了 <code>font-size: 0或line-height: 0，文字被压缩到高度为 0，首行盒存在但不可见 - 用了
white-space: nowrap或text-overflow: ellipsis，改变了换行逻辑，使首行范围超出预期
真正可靠的验证方式：打开 DevTools → Elements → 选中目标元素 → 切到 Computed 面板，搜索 color 或 font-size，确认对应属性是否来自 ::first-line 规则；如果连规则名都没出现，问题一定出在触发条件上，而不是样式写错。
