::first-line仅对块级容器渲染后的视觉首行生效，不作用于内联元素；仅支持color、font-*等文本属性，禁用盒模型属性；不响应js动态内容更新，且受容器宽度、字体、不可见字符等影响首行范围。
::first-line 只对块级容器（如 p、div、blockquote）的**渲染后视觉首行**生效，不是“语义第一句”，也不是“DOM 第一个文本节点”——直接写在 span 或 a 上，样式压根不会应用。
为什么写了 p::first-line 却没效果
常见原因不是语法错，而是容器没形成块级上下文或首行判定被干扰：
- 父元素用了
display: flex或display: grid，导致子p被压缩成单行（无换行 → 浏览器仍算它有“第一行”，但部分旧版 Chrome/Safari 渲染异常） - 段首存在不可见字符：全角空格、
\u200B（零宽空格）、\uFEFF（BOM），会提前截断行盒生成 - 用了
white-space: nowrap或text-overflow: ellipsis，强制不换行，首行即全文，但某些场景下伪元素不触发 - HTML 中
p标签内嵌了float元素或position: absolute的文字，破坏行内格式化上下文（IFC）
::first-line 能设哪些属性、哪些不能设
它只允许影响**文本渲染结果**的属性，和盒模型完全无关：
- ✅ 可用：
color、font-size、font-weight、line-height、background-color、text-transform、letter-spacing - ⚠️ 有兼容风险：
background-image（部分 Safari 版本忽略）、text-shadow（IE9+ 支持，但字体加载延迟时可能闪动） - ❌ 完全无效：
margin、padding、border、width、height、display、position
特别注意：background-color 是安全的，但 background 简写可能因含 background-position 等不支持属性而整条失效。
响应式下首行范围突然变化怎么办
窗口缩放、字体加载完成、系统字体替换，都会改变每行能容纳的字符数，从而让“哪一行是第一行”动态重算——这不是 bug，是设计如此：
- 测试时务必手动拖拽浏览器宽度，观察某临界点是否出现样式跳变（比如从两行变三行，原第二行变成新“第一行”）
- 避免依赖
font-size大幅放大首行（如2em），否则短段落里首行可能撑高整段line-height，把后续行往下顶 - 若需稳定突出效果，优先组合
color+font-weight+text-transform，比调尺寸更可控 - 动态插入内容（如
innerHTML = '...'或 ReactuseState更新）后，::first-line不会重算——浏览器只在 layout 阶段识别一次，无法响应 JS 修改文本
最易被忽略的一点：它不感知内容变化，也不受 CSS-in-JS 的“热更新”影响；一旦 DOM 文本变了，就得靠强制重排（比如改 key 或触发布局抖动）才能让浏览器重新识别首行——但代价是性能损耗。真要动态控制首行，不如用 JS 计算字符宽度 + 拆分 DOM，再套 class 控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
