::first-line生效前提为段落是块级容器且未被flex/grid/table布局干扰；仅支持color、background-color、font系列等文本属性，禁用margin/padding等布局属性，响应式下其作用范围随折行动态变化。
直接生效的前提是：段落必须是块级容器，且不能被 flex/grid/table 布局干扰；否则 ::first-line 会静默失效，连 background-color 都不会显示。
为什么博客文章里 ::first-line 经常不生效
多数博客模板把 <p> 包在 <article> 或 <section> 里，而这些父容器常设 display: flex 或 display: grid —— 这直接禁用 ::first-line。它只认 display: block、table-cell、inline-block 这类能生成「行盒」的显示类型。
- 检查目标
<p>的最近块级父元素是否用了flex或grid；如有，加一层<div style="display:block">包裹该段落 - 避免在段首插入
<span>、<em>或空格/零宽字符（如\u200B），它们可能让浏览器无法识别“首行文本起点” - 确认没有更具体的 CSS 规则（比如
p.intro::first-line）意外覆盖了你的选择器，用浏览器开发者工具的“Computed”面板看样式是否被标记为“invalid”
::first-line 能安全改哪些样式？
它只接受纯文本格式属性，写了也白写的属性包括 margin、padding、border、width、height、transform。真正稳的只有这几类：
-
color、background-color（唯一可靠的背景方式） -
font-size、font-weight、font-style、font-variant -
text-transform（如uppercase）、letter-spacing、line-height（注意：它控制整行盒高度，不是字体大小） -
text-indent可用，但会影响首行起始位置计算——不是失效，只是视觉上“缩进后才开始高亮”
慎用 background-image：部分 Safari 版本会忽略，Firefox 渲染可能断裂；text-shadow 兼容性好，但大量段落同时启用会轻微拖慢渲染。
立即学习“前端免费学习笔记（深入）”；
响应式下导读文字“跳行”怎么办
::first-line 永远绑定当前渲染出的第一行，不是 HTML 里的前几个字。手机屏宽变窄 → 文字折行增多 → 原本第二行开头的词可能被挤进新首行 → 样式就“跳”过去了。这不是 bug，是设计行为。
- 如果需要固定前 20 字加粗，别用
::first-line，改用<span class="lead">手动包裹，再配 CSS - 若坚持用伪元素，可限制容器最大宽度（如
max-width: 60ch）并配合font-size媒体查询，减小折行波动幅度 - 搭配
::first-letter时注意层叠顺序：::first-letter在::first-line内部，所以font-size设太大可能撑开整行高度
最易被忽略的一点：::first-line 对空格和换行符敏感，但对字体加载延迟不敏感——如果用了自定义字体且 font-display: swap，首行样式会在字体回退态下先应用，等新字体加载完成才重绘。这意味着你在调试时看到的“没生效”，可能只是字体还没切过来。
