::first-line生效需满足四条件：目标为块级元素、父容器不破坏BFC（禁用flex/grid）、首行无内联元素或不可见字符打断、文本处于完整行盒中；仅支持color、font-size等文本属性，禁用margin等布局属性；响应式下首行范围动态重算。
::first-line 能生效的前提很具体：它只作用于块级上下文中真实渲染出的第一行文本，不是你“以为”的前几个字，也不是所有嵌套结构里都能触发。
为什么 ::first-line 经常完全没反应
最常见原因是目标元素根本没生成「行盒」（line box）——浏览器压根不认为它有“第一行”可选。
- 父容器是
display: flex或display: grid，::first-line会静默失效，不报错也不渲染 - 目标元素本身是
span、a或被设为display: inline，它不是块级上下文的起点 - 段落开头有不可见字符，比如
\u200b（零宽空格）或\u3000（中文全角空格），它们会提前截断行盒起始点 - 首行内嵌了
float元素、position: absolute文字，或inline-block子元素，破坏了内联格式化上下文（IFC）
::first-line 实际能用哪些 CSS 属性
它不是通用样式接管者，超出范围的声明会被浏览器静默丢弃——写了也白写，且不报错。
- 安全可用（现代浏览器一致支持）：
color、font-size、font-weight、font-style、text-transform、letter-spacing、line-height、background-color - 明确禁用（别浪费时间）：
margin、padding、border、width、height、display（设成inline-block会让伪元素直接失效）、background-image（Safari 和旧版 Firefox 常忽略）
响应式下首行样式“跳变”是设计本意，不是 bug
::first-line 永远绑定的是「当前渲染后第一行的实际内容」，不是 HTML 源码里的前 N 个字符。
立即学习“前端免费学习笔记（深入）”；
- 窗口缩放、字体加载延迟、
word-break: break-all都会让首行覆盖的字数动态重算 - 桌面端首行显示 10 个汉字，缩到手机屏后变成 4 个，样式就自动 applied 到新首行
- 如果首行只剩一个词（如“然而”），加粗后显得突兀，建议用媒体查询降级：
@media (max-width: 480px) { p::first-line { font-weight: normal; } }
真正容易被忽略的点是：它和 ::first-letter 共存时，后者始终包裹在前者内部，不是并列关系；而且一旦首行里混入任何非纯文本内容（比如一个 <strong></strong> 包裹的词），整个首行的判定就可能偏移或失效——这不是兼容性问题，是规范行为。
