::first-line仅作用于块级容器渲染后的视觉首行，不支持前N字或语义首句；失效主因是父容器为flex/grid/table、首行含内联元素/空格/零宽字符、目标非块级元素或使用单冒号；仅支持color、font-size等文本属性，禁用margin/padding等布局属性。
::first-line 不是用来“选中前几个字”或“控制语义首句”的，它只响应浏览器渲染后实际出现在第一行的文本。用错场景或期望它做超出能力的事，八成会失效。
为什么 p::first-line 写了但没效果
最常见原因不是语法错，而是布局环境不支持：
- 父容器用了
display: flex、display: grid或display: table→::first-line直接被忽略 - 段落开头有
<img alt="如何使用css的::first-line改变段落首行样式_提升长文本阅读体验" >、<span style="max-width:90%"></span>或空格/零宽字符（如\u200B）→ 行盒生成异常，“第一行”可能为空 - 目标元素本身不是块级上下文，比如对
<span></span>直接写span::first-line→ 无效，必须先设display: block（但此时行为已变，慎用） - CSS 选择器写成
p:first-line（单冒号）→ 现代浏览器虽部分兼容，但推荐统一用双冒号p::first-line
哪些 CSS 属性在 ::first-line 里真正可用
它只接受参与文本渲染的属性，其他一律静默丢弃：
- ✅ 安全可用：
color、font-size、font-weight、text-transform、letter-spacing、line-height、background-color - ⚠️ 有风险：
background-image声明可能被 Safari 或旧 Chrome 忽略；text-indent虽能生效，但它作用于整段，不是::first-line的专属控制项 - ❌ 完全无效：
margin、padding、border、width、height、float、position、transform
动态内容下 ::first-line 为啥“卡住”不更新
它不监听 DOM 变化，只依赖浏览器 layout 阶段的一次性计算：
立即学习“前端免费学习笔记（深入）”；
- Vue/React 中通过响应式更新段落文本（如
v-html或innerHTML）→ 样式不会自动重算，仍按旧文本宽度和换行点生效 - 字体加载延迟（
font-display: optional）或用户缩放页面 → “哪一行是第一行”会变，但样式不会回退或迁移，可能突然消失或套错位置 - 想强制刷新？可临时 toggle 一个 class、或改个无关紧要的
font-size触发重排，但别滥用，影响性能
当 ::first-line 不够用时，该换什么思路
它解决不了语义问题，也搞不定嵌套控制：
- 要高亮“第一句话”（含标点），而不是视觉首行 → 得靠 JS 提取句号/问号/感叹号前的内容，或后端加
<span class="lead-sentence"></span> - 要首字下沉 + 首行变色 →
::first-letter和::first-line可共存，但注意层叠顺序：::first-letter会盖在::first-line上面 - 要精确控制首行中某几个字（比如“摘要：”两个字加粗）→ 手动包裹
<span class="summary-label"></span>，别硬扛::first-line
真正难处理的是它完全依赖渲染结果——你没法提前知道用户开了多大窗口、装了什么字体、是否启用了系统级字体替换。这些都会让“第一行”飘移，而样式不会抱怨，只会沉默失效。
