::first-letter实现首字下沉需设line-height、display:block/inline-block，避免vertical-align；仅作用于块级容器首字符，中文需防全角标点干扰，复杂需求建议改HTML结构或用initial-letter。
如何用 ::first-letter 实现首字下沉但不破坏行高
直接放大首字 + float: left 很容易让后续文字上爬、行高塌陷，或者首字和第二行文字重叠。根本原因是 ::first-letter 默认是 inline 元素，而 float 会把它从正常流中抽离，但父容器没做清除或最小高度约束。
实操建议：
- 给段落加
line-height（比如1.6），确保有足够垂直空间容纳下沉字 -
::first-letter必须显式设置display: block或inline-block，否则float在部分浏览器（尤其是 Safari）下行为不稳定 - 用
margin-right控制首字和正文的间距，别依赖空格——HTML 压缩后空格会消失 - 避免对
::first-letter设置vertical-align，它在浮动上下文中无效，反而可能引发对齐错乱
article p {
line-height: 1.6;
}
article p::first-letter {
float: left;
font-size: 3em;
font-weight: bold;
display: block;
margin-right: 0.2em;
}
为什么 ::first-letter 有时不生效
常见错误现象：首字没变大、没浮动、甚至整个伪元素消失。这不是 CSS 写错了，而是触发条件没满足。
关键限制：
立即学习“前端免费学习笔记（深入）”；
- 只作用于「块级容器」里的第一个字母或标点（如中文首字、英文首字母、破折号、引号等），
<span></span>或<em></em>包裹的首字会被跳过 - 父元素不能是
display: inline；如果段落被包在<div style="display: inline"> 里，<code>::first-letter直接失效 - 内容必须是真实文本节点——如果首字被
v-html、innerHTML动态插入且含空格/换行/注释，某些浏览器会找不到“第一个字母” - CSS 中若用了
font-variant-east-asian: traditional等字体特性，可能干扰首字识别（尤其在旧版 Chrome） - 确保段落开头没有空格、换行、零宽字符（
）、或隐藏的<wbr></wbr> - 避免用
text-indent模拟首行缩进——它不影响::first-letter的定位，但会让下沉字位置偏移，显得像没对齐 - 在 Safari 中，如果段落有
hyphens: auto，::first-letter可能被忽略；关掉即可 - 不要指望
::first-letter支持background-clip: text或mix-blend-mode——这些在多数浏览器里被禁用或渲染异常 - 服务端或 JS 提取首字，包裹成
<span class="drop-cap"></span>，再用普通类名控制样式 - 用
grid布局模拟下沉：给段落设display: grid，首字作为单独 grid item，用grid-row跨多行 - 注意：CSS
initial-letter（Chrome 117+ / Safari 16.4+）才是现代解法，但目前 Firefox 完全不支持，生产环境慎用
兼容性与中文首字下沉的坑
中文排版里，“首字”看起来简单，但浏览器实际提取逻辑和英文不同：它认的是 Unicode 字符边界，不是视觉字形。这意味着全角标点（如《、》、“、”）也可能被当作“首字符”捕获，导致下沉了引号而不是汉字。
应对方式：
替代方案：什么时候该放弃 ::first-letter
当需求超出伪元素能力时，硬调 CSS 不如改 HTML 结构。比如要支持响应式字号缩放、首字带底纹+描边+阴影、或需要 JS 动态控制下沉状态，::first-letter 就太脆弱。
更可控的做法：
真正麻烦的从来不是怎么写那三行 CSS，而是得判断这个“首字”到底是不是浏览器愿意认的那个字。
