::first-line仅作用于块级元素渲染后的视觉首行，不能限制行数，也不支持::nth-line等语法；实现多行截断需用-webkit-line-clamp配合display:-webkit-box，二者功能无关。
直接说结论：::first-line 不能限制行数
它只作用于块级元素渲染后的视觉第一行，不是“第1行到第N行”，也没有 ::nth-line 或 ::last-line 这类标准伪元素。想靠 ::first-line 实现“只显示前3行”或“截断后加省略号”，语法上就走不通——浏览器根本不会识别 p::nth-line(2)，也不会响应 line-clamp 这类写法（那是 -webkit-line-clamp 的事）。
::first-line 和 line-clamp 根本不是一回事
很多人混淆两者，以为 ::first-line 能配合 display: -webkit-box 控制多行。其实：-webkit-line-clamp 是 WebKit 私有属性，依赖 display: -webkit-box + overflow: hidden + text-overflow: ellipsis 组合生效；而 ::first-line 是独立伪元素，不参与行数裁剪逻辑，也不影响 line-clamp 的行为。
-
::first-line只能给首行文本加样式（比如变色、加粗），不能隐藏后续行 -
-webkit-line-clamp: 3才是真正截断并显示省略号的手段，但它和::first-line互不干扰——你可以同时用，但它们各干各的 - 如果用了
line-clamp，::first-line依然只作用于被截断后实际显示出来的那“第一行”，不是原始内容的第一行
想控制预览段落行数，该用什么
正确路径是放弃 ::first-line，转向明确支持行数限制的方案：
- 现代标准方案：
display: -webkit-box+-webkit-line-clamp: N（N 为期望行数），必须配overflow: hidden和word-break: break-word或overflow-wrap: break-word - 兼容性兜底：服务端或 JS 预处理——按字符数或句号切分，只取前 N 行 HTML 片段，避免纯 CSS 不可控
- 注意中文断行陷阱：
line-clamp在中文字体下可能因字宽计算偏差导致多出半行或少一行，建议加font-size稳定值，避免用rem或em动态缩放 - 不要在 flex/grid 容器内直接套
line-clamp——父级布局会破坏-webkit-box的行盒生成，需确保目标元素是display: block或显式设为display: -webkit-box
为什么有人觉得 ::first-line “好像能控制行数”
常见错觉来源：
- 误把
text-indent当成行控制——它只缩进首行，不影响总行数 - 看到首行加粗后“显得更突出”，误以为后续行被压制了
- 在固定宽度容器里恰好首行占满，第二行被撑到下一行，误判为“只显示了一行”
- DevTools 里手动改
width观察折行变化，误以为::first-line在响应行数
真正难的是让 line-clamp 在不同字体、不同缩放、不同设备上稳定截断——它依赖渲染时的像素计算，而 ::first-line 连这个边界都碰不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
