p::first-line 生效需满足三条件：目标为块级元素、父容器不破坏bfc、首行无内联元素打断；仅支持有限css属性，且响应式下首行范围动态变化。
p::first-line 是唯一标准方案，但直接写上就生效的前提非常具体——不满足任一条件，样式都会静默失效，连控制台都不报错。
为什么 p::first-line 没反应？先查这三处硬伤
浏览器不是按 HTML 源码找“第一行”，而是按最终渲染出的 line box（行盒）来匹配。以下情况会让伪元素彻底失效：
- 目标元素不是块级：比如对
span或a写span::first-line—— 无效 - 父容器破坏了 BFC：把
p套在display: flex或display: grid的div里，Safari 和旧 Chrome 直接跳过首行计算 - 首行被内联元素打断：开头有
<img>、<em></em>、零宽空格\u200b或全角空格\u3000，行盒无法连续生成
p::first-line 能用哪些 CSS 属性？别写白费劲的
它不是普通选择器，CSS 规范明确限制可用属性。超出范围的声明会被浏览器静默丢弃：
- ✅ 安全可用：
font-weight、color、font-size、text-transform、letter-spacing、line-height - ⚠️ 条件可用：
background-color在 Chrome/Firefox/Safari 16.4+ 稳定，旧 Safari 会忽略；background-image或简写background在 Safari 中可能断裂 - ❌ 完全无效：
margin、padding、border、width、height、display、position—— 写了等于没写
响应式下首行加粗“漂移”是正常行为，不是 bug
窗口缩放、字体加载完成、甚至 font-size 动态变化，都会触发重排，p::first-line 会重新计算并应用样式。这意味着：
- 桌面端可能加粗前 50 字，移动端只剩前 12 字
- 一个超长英文单词换行，首行可能只剩一个字母——加粗和变色也只作用于那一个字母
- 如果需要“固定前 N 字加粗”，
::first-line不适用，得用 JS 截取字符串或服务端注入
和 ::first-letter 混用时的隐藏冲突
两者可以共存，但渲染顺序固定：::first-letter 始终包裹在 ::first-line 内部。容易踩坑的是：
-
p::first-letter { float: left; }后，被浮动的字母脱离文本流，::first-line只能选中它右边的剩余文字 - 若同时设
background-color，::first-letter的背景会盖住::first-line的背景 - 别在同一个选择器里反复覆盖，比如先写
p::first-line再改font-size，实际生效范围容易误判
真正难调试的点在于：首行判定完全依赖渲染结果，不是字符数、不是换行符、也不是你写的 HTML 结构——哪怕你删掉所有空格和标签，只要字体加载慢半拍，首行范围就可能偏移一两个像素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
