::first-line不生效最常见原因是父容器使用flex/grid/table布局，它仅对block等能形成行盒的显示类型有效；且仅支持color、font-size等文本属性，禁用margin、padding等布局属性。
为什么::first-line有时完全不生效
最常见原因是父容器设置了display: flex、display: grid或display: table——这些布局模式下::first-line会被忽略。它只对display: block（或inline-block、table-cell等能形成行盒的显示类型）有效。
另一个隐蔽坑是：如果第一行文字被
<br>
、或内联元素提前截断，浏览器可能无法准确识别“第一行”的文本范围，导致样式丢失。
- 确保目标元素是块级容器，比如
、，且未被覆盖为flex/grid- 避免在段首插入空格、换行符或不可见Unicode字符（如
\u200B），它们可能干扰行首计算- 不要在第一行内嵌套
float或position: absolute元素，这会破坏行盒生成::first-line支持哪些CSS属性它只接受一部分“文本相关”的CSS属性，不是所有样式都能用。比如
color、font-size、font-weight、text-transform、letter-spacing都合法；但margin、padding、border、background（除background-color外）、width、height全部无效。特别注意：
background-image虽可声明，但实际渲染行为不稳定，部分浏览器会忽略；而background-color始终可用，适合做高亮底色。- 安全可用：
color、font-family、font-style、line-height（仅当不改变行高计算时） - 明确禁用：
display、visibility、transform、filter - 慎用：
text-shadow（兼容性好但可能加重渲染开销）、font-variant（某些旧版Safari有bug）
如何让第一行真正“只作用于视觉第一行”
响应式场景下，窗口缩放会导致文字自动折行，
::first-line始终匹配当前渲染后的第一行，而不是HTML源码中的前N个字符——这是它的设计本意，也是优势。但如果你需要“固定前20字加粗”，就不能依赖::first-line，得用JS或服务端逻辑切分。若想强化控制，可配合
white-space: nowrap强制单行（但会破坏换行），或用max-width限制容器宽度来稳定折行点。不过更实用的做法是：把长文章拆成多个，只为首段应用::first-line，避免跨段落误匹配。- 不要给整篇
设::first-line，而是精确到每个或 - 使用
word-break: keep-all或overflow-wrap: normal减少因断词导致的第一行长度突变 - 在CSS中显式写
p::first-line { font-size: 1.2em; color: #2c3e50; }，比用通配符*::first-line更可控
IE和旧版移动端的兼容性现实
::first-line在IE8+、Chrome 1+、Firefox 1+、Safari 1.3+均支持，但IE8仅支持单冒号语法:first-line，且不支持在伪元素上叠加其他伪类（如p:first-child::first-line在IE8会失效）。真正的麻烦来自安卓WebView 4.3及更早版本：它们对
::first-line的实现极不一致，有时只作用于纯文本节点，遇到或就中断样式。iOS 9.3之前的Safari也有类似问题。- 生产环境建议加一层降级：
p::first-line { font-weight: bold; } p { font-weight: normal; }，保证至少字体加粗可见 - 避免依赖
::first-line实现关键信息传达（比如法律条款首句警示），这类内容应改用结构化标记 - 测试时务必在真实低版本设备上验证，模拟器常给出错误乐观结果
实际项目里最容易被忽略的，是当文章从CMS动态注入HTML后，首段开头带了
这类装饰元素——它会让::first-line失效，因为第一行已不是纯文本流。这时候要么清理HTML，要么改用JS定位首行DOM节点再加class。 - 避免在段首插入空格、换行符或不可见Unicode字符（如
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
