::first-line仅对块级容器生效，作用于渲染后视觉首行；失效常见于inline、float、absolute、Flex/Grid容器；不可设宽高边距，仅支持文本属性；line-height与字体混排易致视觉异常。
为什么::first-line有时完全不生效
根本原因通常是它只对块级容器（或生成块级框的元素）生效，且仅作用于“视觉上第一行”的文字——不是DOM中第一个文本节点，而是渲染后最顶部那行。常见失效场景：父元素display: inline、被float或position: absolute干扰、内部有
<br>或空行提前换行。
- 确保目标元素是
block、inline-block或table-cell等能形成BFC的显示类型 - 避免在第一行内容前插入
<span></span>或margin-top负值导致“视觉第一行”上移 -
::first-line不能设置width、height、margin、padding（部分浏览器会忽略），但可设color、font-*、text-decoration等文本相关属性
::first-line和line-height的隐性冲突
当元素设置了line-height，而第一行文字实际高度因字体差异（如中文混排英文/数字）超出该值时，::first-line样式可能只覆盖“基线区域”，视觉上像没生效。这不是bug，是CSS行盒（line box）计算逻辑决定的。
- 用
font-size统一第一行内所有字符（尤其注意sub/sup、图标字体） - 若需精确控制，改用
span包裹首行文字手动标记，而非依赖伪元素 -
line-height: 1.2比line-height: 20px更安全——后者在字号变化时易破坏首行识别
在Flex/Grid容器里::first-line还能用吗
不能。Flex项目或Grid项默认不生成行盒（line box），::first-line直接失效。即使子元素是display: block，只要它处于display: flex父容器中，伪元素就无从触发。
- 检查计算后的
display值：用DevTools的Computed面板看display是否为flex或grid - 临时方案：给文字外层加一层
div并设display: block，再对这个div应用::first-line - 没有“flex-item::first-line”这种写法，CSS规范明确排除了非块级上下文
兼容性与移动端要注意的细节
Safari（尤其iOS ::first-line支持较弱：不支持嵌套在@media查询内动态启用、不响应font-size媒体查询变化、且在transform: scale()缩放后常丢失样式。
立即学习“前端免费学习笔记（深入）”；
- Android WebView（Chrome内核）基本可靠，但需避免
will-change: transform影响重绘 - 不要在
@supports里检测::first-line——它无法被CSS特性查询识别 - 真机测试必做：某些安卓定制系统（如华为EMUI）会把首行判定逻辑强制对齐到物理行高，导致多字节字符截断异常
