p::first-line 失效最常见原因是父容器非块级上下文或目标元素为 inline 元素，导致无行盒生成；仅支持 color、font-size 等文本属性；响应式下首行动态变化属正常行为。
为什么 p::first-line 有时完全没反应
最常见原因是父容器不是块级上下文，比如套在 display: flex 或 display: grid 的 div 里，又或者目标元素本身是 span、a 这类默认 display: inline 的元素。浏览器根本不会为它们生成行盒（line box），::first-line 就无从挂钩。
实操建议：
- 确保目标元素是天然块级标签（如
p、div、section），或显式设为display: block/table-cell - 检查父级是否用了
flex/grid—— 若必须嵌套，把::first-line移到子块元素上，而不是 flex 容器本身 - 避免开头有不可见字符：
\u200b（零宽空格）、\u3000（中文全角空格）会干扰首行起始位置判断 - 别在目标元素上设
font-size: 0或line-height: 0，否则首行可能被压扁到不可见
p::first-line 能用哪些 CSS 属性
::first-line 只接受文本相关属性，超出范围的声明会被浏览器静默丢弃（不报错，但也不生效）。这不是 bug，是规范限制。
安全可用（兼容性稳、各浏览器一致）：
立即学习“前端免费学习笔记（深入）”；
-
color、font-size、font-weight、font-style -
text-decoration、text-transform、letter-spacing -
line-height（仅影响该行盒高度，不影响段落整体行距） -
background-color（唯一可靠支持的 background 类属性）
明确禁用（写了也白写）：
-
margin、padding、border、width、height -
display（设成inline-block等会直接让伪元素失效） -
background-image（渲染行为不稳定，Safari 和旧版 Firefox 常忽略）
响应式下首行样式“跳变”怎么办
::first-line 永远绑定的是「当前渲染后第一行的实际内容」，不是 HTML 里前几个字符。窗口缩放、字体加载延迟、甚至 word-break: break-all 都会让首行覆盖的字数动态变化。
比如一段文字在桌面端首行显示 8 个汉字，缩到手机屏后变成 4 个，样式就自动 applied 到新首行——这其实是设计本意，不是缺陷。
若需稳定控制范围：
- 把长文拆成多个
p，只为真正需要强调的首段加::first-line，避免跨段误匹配 - 用
max-width限制容器宽度，减少折行点浮动 - 真要固定前 N 字（如“首两字加粗”），
::first-line无能为力，得手动包裹<span class="lead-words">...</span>或用 JS 计算getClientRects()
和 ::first-letter 混用时要注意什么
两者可共存，但层叠顺序固定：::first-letter 总是包裹在 ::first-line 内部，它的样式会叠加其上。
例如：
p::first-line { color: blue; }
p::first-letter { color: red; font-size: 2em; }
结果是：首字母红色+放大，其余首行文字蓝色。
容易踩的坑：
- 别给
::first-line设background-color后，又给::first-letter设同色背景——后者会盖住前者，视觉上像“没生效” -
text-indent属于首行整体缩进，它不影响::first-line的选取范围，但会让首字母看起来偏移，易误判 - 不要试图用
::first-line控制首字下沉（drop cap），那是::first-letter的职责，且二者不能嵌套
真正难处理的不是语法，而是排版环境的不确定性：中文字体宽度、标点断行、自定义字体加载时机、甚至用户系统设置的字号缩放，都会让“第一行”边界浮动。与其强求精准，不如把 ::first-line 当作一种轻量、响应式的视觉提示手段——它适合营造氛围，不适合做精确文本控制。
