::first-letter不生效最常见原因是父元素未设display: block；其次因float、position: absolute破坏文档流；还有font-size过小或line-height过大导致视觉下沉失败。
为什么::first-letter有时不生效
最常见原因是父元素没设display: block（比如默认就是，但若被改成display: inline或flex就失效）；其次是用了float、position: absolute等破坏文档流的属性，导致首字脱离上下文；还有就是font-size太小或line-height过大，视觉上“沉”不下去。
实操建议：
- 确保段落是块级元素，且未被强制改为
inline或inline-block - 避免在
p上直接用float，改用margin或grid布局控制环绕 - 优先用
font-size+line-height+float: left组合，这是兼容性最好、行为最可控的方式
::first-letter支持哪些样式属性
它只支持有限的 CSS 属性：基本字体相关（font-*）、颜色（color）、背景（background-*）、边框（border-*）、内边距（padding）、外边距（margin）、text-transform、letter-spacing，以及float和vertical-align。不支持transform、display（设成block除外）、width/height（除非配合float）。
关键点：
-
float: left是实现“下沉+文字环绕”的核心，缺了它，首字只是变大，不会让后续文字绕排 -
margin-right比padding-right更可靠——后者可能被字体渲染吃掉一部分 - Chrome 和 Safari 对
line-height在::first-letter里的计算略有差异，建议显式设line-height: 1
中文首字下沉的特殊处理
中文没有大小写概念，text-transform无效；标点（如“《”、“（”）也可能被选中，造成错位；更麻烦的是，某些字体里汉字字宽不均，单纯放大容易撑破行框。
稳妥做法：
- 用
font-family指定一个等宽或结构稳定的中文字体（如"PingFang SC", "Hiragino Sans GB"），避免用手写体或装饰体 - 加
margin-bottom: -0.2em微调垂直位置，弥补中文字基线偏高问题 - 如果首字是标点，可用
text-indent缩进整段，或 JS 检测后动态加 class 排除 - 别依赖
::first-letter选中引号类字符——它会把“《”整个当首字母，结果放大后严重溢出
替代方案：什么时候该放弃::first-letter
当需要精确控制下沉高度（比如下沉 3 行）、要适配响应式断点、或首字需带 SVG 图标/渐变色时，::first-letter力不从心。这时更推荐手动包裹首字：这是一段文字...。
优势明显：
- 可自由用
grid或flex布局定位，支持aspect-ratio、clamp()等现代特性 - 能绑定 JS 事件（比如点击放大），
::first-letter完全不可交互 - 规避了 Safari 对
::first-letter在contenteditable区域的渲染 bug
真正难的不是怎么写样式，而是判断该不该用伪元素——它省事，但边界清晰；一旦需求越界，硬撑反而更费时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
