::first-letter生效需同时满足三条件：段落为块级元素、首字符是纯文本、未被内联标签包裹；常见失效主因是HTML结构含空格、换行、注释或父容器为flex/grid等非块盒。
直接用 ::first-letter + float: left 就能生效，但必须满足三个硬条件：段落是块级元素、首字符是纯文本、没被内联标签包裹。
为什么 p::first-letter 写了却没反应？
最常见原因不是 CSS 写错，而是 HTML 结构“藏了干扰项”：
- 段落开头有空格、换行符或 HTML 注释（比如
<!-- 开头注释 --><p>文字</p>），::first-letter就选不到真正的第一个字 -
<p><span>首</span>字下沉</p>—— 首字符被<span>包着，伪元素失效 - 父容器设了
display: flex或display: grid，::first-letter在非块盒里不工作 - 用了
display: inline的<p>，得先加display: block才能触发伪元素
::first-letter 必须配哪些 CSS 才算真正“下沉”？
只放大字体只是“变大”，不是“下沉”。要让后续文字环绕并垂直对齐，这三样缺一不可：
-
float: left—— 触发文本流环绕，这是下沉的底层机制 -
font-size放大（建议用rem或em，别用固定px） -
line-height设小（通常0.7–0.9），否则第二行会从原 baseline 起始，看起来像“浮在上面”
示例：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
p::first-letter {
float: left;
font-size: 3.5rem;
line-height: 0.75;
margin-right: 0.2rem;
margin-top: 0.1rem;
}注意：margin-top 是为中文微调用的——中文字体 baseline 不统一，vertical-align 在这里基本无效，靠 margin 手动压位置更可靠。
中文首字下沉容易错位的两个隐藏坑
中文字不像英文字母有稳定 baseline，渲染时上下浮动明显，尤其在不同字体或字号下：
- 用系统默认字体（如 sans-serif）时，下沉字常“沉不够”，看起来偏高；换成明确指定的中文字体（如
"PingFang SC", "Microsoft YaHei"）能提升一致性 - 响应式场景下，
3.5rem在手机上可能撑破容器，或导致环绕行数暴增；建议配合媒体查询降级，比如小屏改用2.2rem+line-height: 0.85
真正麻烦的不是怎么写，而是怎么验——每次改完记得用开发者工具检查 computed 样式里 ::first-letter 是否被应用、是否被覆盖、是否命中了真实首字符。字体、行高、浮动、margin 四者稍有偏差，视觉上就差一截。
