::first-line稳稳搞定纯视觉强化需求，如首行变色加粗、大写、字间距微调、背景色高亮及行高调整；它不支持固定字符数截取、首句标红等语义化控制，且首行范围随响应式布局动态重算。
哪些首行样式需求能用::first-line稳稳搞定
它适合「纯视觉强化」类需求，前提是接受首行范围随布局动态变化。比如新闻摘要卡片里让每段第一行变深色、加粗或大写，用户扫一眼就能抓住开头语义——这类场景不用精确控制字符数，::first-line开箱即用。
能安全落地的典型效果包括：
-
color+font-weight组合（如首行深灰加粗） -
text-transform: uppercase或small-caps（标题感强化） -
letter-spacing微调字间距提升可读性 -
background-color局部高亮（需确保无 inline-block / 浮动干扰） -
line-height单独调整首行盒高度（注意：不是改字体大小）
哪些需求看似合理但::first-line根本做不到
它不是文本截取工具，所有依赖“固定字符数”或“语义边界”的需求都会翻车。比如“每段前 20 字加粗”“首句标红”“跳过引号只对正文首行生效”——这些在响应式下必然错位，因为浏览器按渲染后折行位置算首行，不是按 HTML 字符索引。
常见误判场景：
立即学习“前端免费学习笔记（深入）”；
- 中英文混排时，因字体度量差异导致断点偏移，桌面端首行是“然而”，手机端变成“然”单字加粗
- 用
word-break: break-all强制断词，首行可能只剩一个字母 - JS 动态插入内容后，
::first-line不重算，仍作用于旧 DOM 快照 - 开头有
\u200b（零宽空格）或\u3000（全角空格），首行起始位置被悄悄推后
::first-line和::first-letter一起用时的实际表现
两者能共存，但层叠顺序固定：::first-letter 始终包裹在 ::first-line 内部。这意味着它的样式会叠加在首行之上，而不是并列生效。
例如同时设置：
p::first-line { color: #666; background-color: #f5f5f5; }
p::first-letter { color: #d63384; font-size: 1.8em; }
结果是：首字母为粉红色、放大字号，背景色覆盖其余首行文字；但如果给 ::first-letter 也设 background-color，它会盖住 ::first-line 的背景，因为层叠上下文更靠前。
容易踩的坑：
- 别在同一个选择器里反复覆盖
font-size，比如先设p::first-line { font-size: 18px; }再设p::first-letter { font-size: 24px; }，然后回头又改::first-line的尺寸——实际生效范围难肉眼判断 -
text-indent是段落级属性，不影响::first-line起始位置计算，但背景色不会延伸到缩进空白区，这是正常行为，不是 bug
响应式布局下必须接受的现实
::first-line 永远绑定的是「当前视口宽度下渲染出的第一行」，不是原始文本的前 N 个字符。窗口缩放、字体加载延迟、甚至 font-display: swap 切换都会触发重算。
这意味着：
- 桌面端首行可能是前 12 个汉字，手机屏下只剩前 4 个，样式自动 applied 到新首行——这是设计本意，不是缺陷
- 如果内容结构固定（如小说每段严格 80 字），与其死磕媒体查询降级，不如服务端或 JS 主动包裹首行文字用
<span class="lead"></span> - 用
@media (max-width: 480px)关闭::first-line样式，比强行适配更省心
