::first-line仅对块级容器首行内联内容生效，受显示类型、浮动、换行等限制；仅支持color、font-*等文本属性，不支持margin、padding等；响应式下首行随折行动态变化；与::first-letter共存时层叠顺序固定。
为什么::first-line有时完全不生效
因为::first-line只对**块级容器中的首行内联内容**生效，且受父元素显示类型、字体继承、换行控制等多重限制。常见失效场景包括：父元素是display: inline或flex/grid容器；子元素用了float或position: absolute；或者首行被white-space: nowrap强行压成一行但实际内容超出视口宽度导致渲染异常。
实操建议：
- 确保目标元素是
display: block（如p、div），避免套在span或flex父容器里直接用 - 不要在该元素上设
font-size: 0或line-height: 0，否则伪元素可能被压缩到不可见 - 若用
text-indent缩进首行，它会影响::first-line的起始位置计算，但样式仍会应用——这点常被误判为“没生效”
::first-line能改哪些CSS属性
它只支持一部分文本相关属性，不是所有样式都能作用于首行。浏览器严格限制可继承的属性，比如margin、padding、width、height、border全都不支持；而color、font-*、text-decoration、line-height、letter-spacing这些可以。
常见错误现象：写了::first-line { background: yellow; }却没背景色——因为background虽部分支持，但在某些浏览器中对首行渲染不稳定，尤其当行内有inline-block元素时容易断裂。
实操建议：
- 优先用
color和font-weight做视觉区分，兼容性最稳 - 慎用
background，如必须使用，加display: inline（默认）并确认无换行符干扰 -
line-height可调，但它影响的是整行盒的高度，不是字体大小；若设得过大，可能导致后续行间距异常
响应式下::first-line样式突然错位
首行内容随视口变宽/窄会重新折行，::first-line始终绑定“当前渲染出的第一行”，不是“原文本第一行”。所以当max-width变化导致文字从2行变成3行时，原本第二行开头的内容可能被挤进新首行，样式就“跳”到别处了。
使用场景：新闻摘要、卡片标题、博客列表项——这些地方用户滚动时会频繁触发重排，容易发现样式漂移。
实操建议：
- 避免依赖
::first-line做关键信息强调（比如“重要提示”字样），改用显式span包裹更可控 - 若必须用，配合
word-break: keep-all或hyphens: none减少断行变化频率 - 在
@media中重置::first-line样式时，不要只改color，也要同步检查font-size和line-height是否匹配新布局
与其他伪元素（如::first-letter）共存时的顺序问题
::first-line和::first-letter可以同时存在，但样式层叠顺序固定：::first-letter在::first-line之上。也就是说，如果两者都设了color，首字母颜色以::first-letter为准；但::first-line设的font-weight仍会影响首字母粗细（除非::first-letter也覆盖了它）。
容易踩的坑：给::first-line设text-transform: uppercase，却发现首字母没大写——因为::first-letter的样式后解析，若它没声明text-transform，就会继承::first-line的值；但若::first-letter写了text-transform: lowercase，就会强制覆盖。
实操建议：
- 两个伪元素同时用时，统一管理
text-transform、font-variant这类继承性强的属性 - 调试时用浏览器开发者工具单独禁用其中一个，观察变化，比猜更可靠
-
::first-letter要求首字符必须是字母/数字/标点，若开头是空格、<br>
，::first-line正常，但::first-letter直接不触发
真正麻烦的是首行跨元素边界的情况——比如p里混着em和strong，不同浏览器对“首行内联流”的切分逻辑略有差异，这时候::first-line的表现可能不一致，得靠实际设备测试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
