::first-letter伪元素不生效最常见原因是父元素非块级容器或首字符被内联标签包裹；必须确保父元素为block/inline-block、首字符为纯文本且无前置空白，否则浏览器直接跳过渲染。
::first-letter伪元素只对块级元素生效，且必须确保首字符是纯文本、无前置空白或标签包裹——否则样式完全不触发。
为什么::first-letter写了却没反应
最常见原因是父元素不是块级容器，或首字符被<span>、<strong>等内联标签包住。浏览器认为“第一个字符”不在文本流顶层，直接跳过伪元素。
- 检查父元素是否为
p、div、h2等默认display: block的元素；若用span或a，必须显式加display: inline-block或block - HTML里别写成
<p> 标题</p>或换行后跟文字，首字符前不能有空格、<br> - 中文段落以《、【、"开头时，这些标点会被选中——不是 bug，是规范行为；上线前务必用真实 CMS 数据验证
float: left + font-size 之后文字错位怎么办
单纯放大首字会拉高整行行高，导致第二行文字压在下沉字下方，或上下行距突变。这不是渲染错误，而是::first-letter默认继承父元素line-height，再按放大字号重新计算行框高度。
- 必须显式重设
line-height，常用值在0.7–0.9之间（如line-height: 0.8） - 加
float: left后，后续文字才自然环绕；若去掉float，就只剩放大效果，不“下沉” - 避免用
vertical-align微调位置——在 inline 上下文中行为不稳定；优先用margin-top或transform: translateY()
中文场景下line-height和margin怎么配才不崩
不同中文字体的字怀、上下伸展差异极大：思源黑体的“你”和宋体的“你”，同一套font-size: 3em + line-height: 0.8可能一个刚好贴合，另一个底部被裁切或顶部留白过大。
立即学习“前端免费学习笔记（深入）”；
-
line-height建议设为无单位数值（如0.85），而非px或em，避免嵌套缩放干扰 -
margin-right控制环绕间隙，0.15em–0.25em较安全；太小会挤占正文，太大则像断开 - 响应式场景下，用
clamp(2rem, 4vw, 3.5rem)替代固定em，vmin比em更适配竖屏手机
Flex/Grid 布局里::first-letter突然失效
一旦父容器设了display: flex或display: grid，::first-letter立即失效——这是 CSS 规范定义的行为，不是兼容性问题。
- 不要试图用
grid-area或align-self给伪元素定位，它在 Flex/Grid 中没有盒模型 - 必须回退到结构化方案：手动把首字包进
<span class="dropcap">你</span>，再用float或position: relative控制 - 若用浮动，父容器记得加
overflow: hidden或display: flow-root防止高度塌陷
真正难的不是写对那几行 CSS，而是每次换字体、加图标、切响应式断点时，都要重新调line-height和margin——因为它们和字体度量强耦合，没法一劳永逸。
