先聊一个容易让人困惑的现实：::first-line这个CSS伪元素，想要生效必须同时满足三项条件——目标必须是块级元素、父容器不能破坏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 会直接跳过首行计算 - 首行被内联元素打断：开头出现
、零宽空格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并不适用，应该改用 JavaScript 截取字符串或服务端注入的方式
与 ::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 结构——哪怕你删掉所有空格和标签，只要字体加载稍微延迟，首行范围就可能偏移一两个像素。
