::first-line仅对块级父容器生效，且只作用于视觉首行；支持font/color等有限样式，不支持margin/padding/background；需注意空格、text-indent、overflow等隐藏陷阱。
父容器必须是块级元素才能触发 ::first-line
如果父容器是 inline 元素（比如 <span>、<a>），::first-line 完全不会生效——浏览器根本不会为内联元素计算“首行”概念。必须确保父元素的 display 是 block、table-cell、list-item 或 flex（但注意：Flex 容器子项不继承该伪元素作用范围）等块级上下文。
常见误用场景：
-
<p><span class="intro">这里是段落开头…</span></p>—— 样式写在.intro上没用，要写在p::first-line - 用
display: inline-block包裹文本，看似“像块”，但其内部文本仍受外层行内格式影响，::first-line作用域可能被截断 - Vue/React 中动态渲染的文本若包裹在
<div>但被 CSS 设为display: inline，也会失效
::first-line 只作用于「视觉首行」，不是「HTML 首行文本」
它的选择逻辑基于最终渲染后的换行位置，而不是源码里的换行符或 <br>。这意味着：
React Best Practices 2 0.1.0
下载
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
- 如果第一行实际只显示了半个词（因容器太窄自动折行），
::first-line仅覆盖那半词+空格，而非整个单词 -
<div>Hello<br>World</div>中，::first-line依然只作用于 “Hello”，因为<br>是强制换行，不属于“自动换行形成的首行” - 包含
float或shape-outside的浮动内容会影响行盒布局，可能导致首行范围异常缩小甚至消失
哪些 CSS 属性在 ::first-line 中真正生效？
规范明确限制了可继承的样式属性，很多常用属性会被忽略，比如：
立即学习“前端免费学习笔记（深入）”；
- ✅ 支持：
color、font-*系列（font-size、font-weight）、text-decoration、line-height、letter-spacing、word-spacing - ❌ 不支持：
margin、padding、border、background（背景图/色均无效）、width/height、text-align（对齐由父容器控制） - ⚠️ 特别注意：
background-color在大多数浏览器中完全不渲染；想高亮首行文字，只能靠color+ 底色由父容器提供，或改用box-decoration-break: clone配合inline元素模拟（但非标准方案）
调试时容易忽略的 DOM 结构陷阱
即使父容器是块级，::first-line 也可能“看不见”，原因常藏在结构细节里：
- 首字符是空格、
），导致浏览器认为“首行为空”而不应用样式 - 使用了
text-indent负值把首字推出可视区，看起来像没生效，其实样式已应用，只是字不在视口内 - 父容器设置了
overflow: hidden且首行文字因line-height过大被裁剪，检查 computed styles 中line-height实际像素值 - 在 Shadow DOM 中使用时，
::first-line必须定义在 shadow root 内部样式中，外部样式表无法穿透作用
font-feature-settings 开启连字后首行字形变化，可能让 ::first-line 的字符边界和预期不一致。真遇到怪现象，先用 DevTools 的 Layout 面板确认“首行盒子”的实际尺寸和位置。 
