新闻标题的::first-line伪元素常不生效，因其仅作用于块级上下文生成的行盒，而嵌套在flex/grid容器中的标题无法触发该伪元素；它仅支持color、font-size等行内属性，禁用margin、padding等布局属性；响应式下首行范围随换行动态变化，需用媒体查询或手动包裹span替代。
为什么新闻标题的 ::first-line 经常不生效
因为新闻标题（比如 <h2>）常被嵌套在 display: flex 或 display: grid 的容器里，而 ::first-line 只对能生成「行盒」的块级上下文有效。它不会穿透 flex 容器去选中子元素的首行——哪怕子元素是 <h2>，只要父级是 flex，::first-line 就静默失效。
常见错误现象：h2::first-line { color: #d63384; } 写了但完全没反应；检查 computed styles 发现规则根本没应用，不是被覆盖，而是选择器未命中。
- 确保标题元素自身是块级：显式加
display: block（尤其当它被重置样式或第三方 CSS 影响时） - 避免套在
flex/grid父容器内直接使用；若必须，把::first-line移到标题标签本身，并确认其父级没用font-size: 0或line-height: 0 - 删掉标题开头的
（零宽空格）、
哪些 CSS 属性在新闻标题上真正可用
::first-line 不是全量样式接管者，它只接受与「行内格式」强相关的属性。新闻标题常用效果里，以下能稳用：
-
color、font-weight、font-size、font-style（安全，所有浏览器一致） -
text-transform（大写/小写转换，适合标题强调） -
letter-spacing（微调字间距，提升精致感） -
line-height（仅影响该行盒高度，慎设过大值，否则撑开整个标题行距） -
background-color（唯一可靠支持的背景类属性；background-image在 Safari 和旧 Firefox 中大概率失效）
明确禁用：margin、padding、border、width、height、text-indent（它作用于整段，不是首行独立控制）、display（设成 inline-block 会让伪元素直接失效）。
立即学习“前端免费学习笔记（深入）”；
响应式下标题首行“跳变”的真实原因和应对
新闻标题常需适配多端，::first-line 的首行范围是动态计算的：窗口缩放 → 字体渲染宽度变化 → 换行点移动 → 首行内容改变 → 样式自动 applied 到新首行。这不是 bug，是规范行为。
例如桌面端标题“突发：全球AI峰会开幕”，首行显示全部；手机屏下变成“突发：全球
AI峰会开幕”，::first-line 就只作用于“突发：全球”——如果你给整行设了 background-color，视觉上就像“高亮区域突然缩水”。
- 若想避免小屏下高亮过窄，用媒体查询降级：
@media (max-width: 480px) { h2::first-line { font-size: inherit; } } - 不要依赖绝对字符数；中文标题受字重、字体度量影响大，同一字号在不同系统下断行位置可能不同
- 如果标题含英文单词（如 “iOS 18 Release”），
word-break: keep-all可减少因断词导致的首行长度突变
比 ::first-line 更可控的替代方案
当需要精确控制“前几个字”而非“视觉首行”时，::first-line 无能为力。新闻标题常见需求如「首词加粗+色块」、「冒号前文字差异化」，建议：
- 服务端或构建时手动包裹：
<h2><span class="lead-word">突发：</span>全球AI峰会开幕</h2>，再用类名控制 - 纯前端 JS 辅助（轻量）：
getClientRects()获取首行文本范围，动态插入<span>；注意避免在滚动中高频触发 - 更简单务实的做法：放弃首行，改用
text-shadow+font-weight做视觉锚点，兼容性更好，且不受换行干扰
复杂点在于：它依赖最终渲染结果，而非 DOM 结构；你没法预判用户是否开了系统字体替换、是否禁用了 Web Fonts、甚至是否用了阅读模式插件——这些都会让“哪几个字在第一行”变得不确定。
