p::first-line失效主因是布局环境不满足块级上下文，如父容器为flex/grid、目标元素为inline元素、首行含干扰元素或零宽字符；仅支持color、font-size等文本属性，letter-spacing实际可用但效果受字体和继承影响。
::first-line 不能设置 letter-spacing，也不能控制“前几个字”或“首句”，它只响应渲染后第一行的实际文本范围，且仅支持有限的文本属性。
为什么 p::first-line 写了但完全没反应
不是语法错，而是布局环境不满足块级上下文要求：
- 父容器用了
display: flex或display: grid→ 伪元素被浏览器直接忽略 - 目标元素是
span、a等默认inline元素 → 即使加display: block，部分浏览器仍不生成行盒 - 段落开头有
或零宽字符（如\u200B）→ 行盒起始位置被干扰，首行可能为空 -
font-size: 0或line-height: 0→ 首行被压缩到不可见，伪元素无内容可作用
::first-line 能用哪些 CSS 属性
浏览器只接受影响文本渲染结果的属性，其他一律静默丢弃（不报错，也不生效）：
- ✅ 安全可用：
color、font-size、font-weight、text-transform、letter-spacing、line-height、background-color - ⚠️ 有条件支持：
background-color在 Chrome/Firefox 稳定，Safari 16.4+ 才可靠；text-indent虽能生效，但它作用于整段，不是首行专属 - ❌ 完全无效：
margin、padding、border、width、height、display、position、background-image
想让首行“字距变松”却设不了 letter-spacing 怎么办
letter-spacing 实际上在 ::first-line 中是支持的，但很多人误以为不支持——真正的问题常出在继承或覆盖上：
- 确保没在父级
p上设letter-spacing: normal同时又在::first-line里写inherit，这会导致重置 - 如果首行含中文，
letter-spacing: 0.1em效果微弱，可改用font-size: 1.1em+line-height: 1.3制造视觉疏朗感 - 需要精确控制“前 N 字”的字距？
::first-line做不到，必须手动用包裹，再对 class 设样式 - 注意：
letter-spacing在中英文混排时断点可能偏移，别依赖固定值适配所有屏幕
响应式下首行样式“跳来跳去”是正常现象
::first-line 绑定的是「当前布局计算后的第一行」，不是 HTML 源码顺序。缩放窗口、字体加载延迟、word-break: break-all 都会让首行覆盖内容实时变化：
- 桌面端首行显示 10 个汉字，手机屏下只剩 3 个 → 样式自动 applied 到新首行
- 若首行只剩一个词（如“然而”），加粗后突兀，可用媒体查询降级：
@media (max-width: 480px) { p::first-line { font-weight: normal; } } - 动态插入内容（如 Vue 的
v-html）不会触发重算，需手动触发重排（例如临时修改font-size）
真正容易被忽略的是：它不关心语义，只认渲染结果；哪怕你写了 200 字，只要容器够宽，它就当整段是一行——这时候 ::first-line 样式会作用于全部文字，而非你预期的“开头部分”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
