::first-line仅作用于块级元素视觉第一行，无法控制第2行或N行；无::second-line等标准伪元素；可用样式有限，且受设备、字体、缩放影响。
::first-line 不能给“特定行数”的文字加样式，它只作用于块级元素渲染后的**视觉第一行**，不是第2行、第3行，也不是“前N个字符”——这是根本限制，不是写法问题。
为什么::first-line无法控制第2行或第n行
浏览器在 layout 阶段才确定哪段文本落在哪一行，::first-line 是布局后由渲染引擎动态匹配的伪元素，只对第一行生效。没有 ::second-line 或 ::nth-line 这类标准伪元素。CSS 规范从未定义多行选择能力。
- 尝试写
p::second-line或p::nth-line(2)—— 浏览器直接忽略，不报错也不生效 - Flex/Grid 容器里的子
p即使显示为单行，::first-line仍可能失效（因父级布局切断行盒生成） - JS 动态插入内容后，首行范围不会重算；窗口缩放、字体加载完成时，首行可能突然跳变——但第二行永远不被选中
想突出第2行？得绕开::first-line用其他方式
真实场景中，所谓“第2行加粗”，本质是希望某段语义内容（如导语后的一句总结）视觉上更醒目。这时应放弃行号思维，转向语义或结构控制：
- 手动拆分：
首段
你想强调的这句
.highlight全段设样式 - 服务端/构建时处理：按字数或标点（如句号、换行符）切分，给目标行包裹
- JS 辅助（慎用）：用
getClientRects()获取每行文本的DOMRect，找出 y 值相同且数量 ≥2 的矩形组，再定位第二组的起始位置插入——但 resize 和字体加载期间需重新计算
::first-line 能用的属性比你以为的还少
即使你成功让 ::first-line 生效，能设置的样式也受限极严。超出范围的声明会被静默丢弃，连 DevTools 都不提示：
- ✅ 允许：
color、font-size、font-weight、background-color、text-transform、letter-spacing、line-height - ❌ 禁止：
margin、padding、border、width、height、background-image、display、position - ⚠️ 模糊地带：
text-indent可用，但它属于整个段落，不是::first-line独有；text-shadow多数浏览器支持，但 Safari 旧版有渲染延迟
真正难处理的不是怎么写对，而是它依赖渲染结果——同一段 HTML，在 1366px 屏幕下首行是 8 个字，在 375px 下变成 15 个字，而你完全没法预判用户设备的宽度、系统字体、甚至是否开了「强制更大文字」辅助功能。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
