::first-line不能设置letter-spacing，因CSS规范禁止其应用字符级布局属性；仅支持color、font-size、text-transform等装饰性样式，letter-spacing被浏览器静默忽略。
::first-line 不能设置 letter-spacing ——不是你写错了，是浏览器根本禁止它生效。
为什么 ::first-line 加 letter-spacing 没反应
CSS 规范明确限制 ::first-line 不得应用字符级布局属性。letter-spacing 属于这一类，所以即使写了，所有主流浏览器（Chrome/Firefox/Safari/Edge）都会静默忽略。它只允许影响“文本渲染结果”的装饰性样式，比如 color、font-size、text-transform，但不包括任何会改变字符位置或盒尺寸的属性。
- 常见误判：看到控制台没报错，就以为语法对了——其实声明已被丢弃
- 检查方法：打开 DevTools 的 Styles 面板，找到该规则，被划掉的
letter-spacing就是失效证据 - 注意
word-spacing是例外，它被允许，但作用对象是词间空隙，不是字间
::first-line 真正能用的“间距相关”属性有哪些
虽然 letter-spacing 不行，但仍有几个可替代的视觉调节手段，且兼容性稳定：
-
line-height：可调高首行盒高度，制造上下呼吸感（注意：它不影响字体大小，只撑开行距） -
text-indent：缩进首行，间接改变文字起始位置，常配合text-align: justify使用 -
font-size+ 同步调整line-height：放大首行文字后，若不调line-height，可能把第二行往下顶 -
word-spacing：对中文效果弱（无空格分隔），但对英文段落首行单词间距有效
示例：p::first-line { font-size: 1.1em; line-height: 1.4; word-spacing: 0.1em; }
真要首行字距不同，只能换结构
如果设计稿硬性要求首行每个汉字之间加 0.05em 间距（比如杂志排版），::first-line 无解，必须改 DOM：
- 手动把首行文字包进
<span class="first-line"></span>，再对这个类设letter-spacing - 用 JavaScript 动态截取（需监听
resize、load、fontface加载完成），但存在重排抖动和 SSR 不一致风险 - 避免用
float或position: absolute干扰行盒生成——哪怕只在首行内嵌一个span，也可能让::first-line失效
响应式下首行范围会漂移，别当它是静态切片
::first-line 绑定的是“当前视口宽度下渲染出的第一行”，不是 HTML 文本的前 N 个字符。窗口一缩放，原本第二行开头的字可能被挤回第一行，样式就跟着跳过去。
- 测试时必须拖拽浏览器宽度，观察临界点是否出现样式错位
- 别在
p上同时用text-indent和大幅font-size放大——缩进值固定，而放大后首行内容变少，容易造成视觉断裂 - 最稳的组合是
color+font-weight+text-transform，它们不受折行影响
真正难的从来不是写对一行 CSS，而是理解它背后依赖的排版上下文是否稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
