::first-line无法设置letter-spacing是因CSS规范禁止其应用字符级布局属性，仅支持字体、颜色等装饰性样式；需用font-size、text-transform等替代，或改用span包裹首行实现。
为什么::first-line无法设置letter-spacing
直接给p::first-line加letter-spacing通常没效果——这不是你写错了，而是浏览器限制：CSS规范明确禁止::first-line继承或应用letter-spacing、word-spacing这类影响字符级布局的属性。它只允许字体、颜色、背景、text-transform等“装饰性”样式。
::first-line真正能生效的排版控制项
想让第一行视觉上“更松”或“更紧”，得绕开letter-spacing，用以下可支持的属性组合替代：
-
font-size：放大或缩小第一行文字（注意会改变行高，需同步调整line-height） -
text-transform：配合全大写或小写，间接影响字间视觉密度 -
letter-spacing的父元素继承 trick：把letter-spacing写在p上，再用::first-line重置其他属性（如color），但无法单独为第一行设不同值 - 用
margin或padding微调第一行上下间距，制造呼吸感（虽非字间距，但常是实际需求）
真正需要第一行独立字间距时的替代方案
如果业务场景硬要第一行字距不同（比如首行缩进+宽松字距的杂志排版），伪元素做不到，必须改结构：
- 手动把第一行文字包进
<span></span>，再对这个span设letter-spacing - 用JavaScript动态截取首行文本（需监听
resize和字体加载），但性能和维护成本高 - CSS
shape-outside+ 浮动文本绕排不适用此场景，别试
示例结构：
<p><span class="first-line">这是第一行文字</span>后面是第二行……</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>，然后
.first-line { letter-spacing: 0.1em; }。
容易被忽略的兼容性细节
::first-line在某些旧版 Safari 和 Android WebView 中对换行符敏感——如果段落里有<br>或软换行\n，可能中断伪元素作用范围；另外，若父容器font-size为0或line-height过小导致首行不可见，::first-line样式也会失效。
