::first-letter 在富文本编辑器中基本不可靠，因编辑器生成的 HTML 常含首字符前换行/空格、内联标签包裹、零宽字符、flex/grid 布局及全角标点开头等问题，导致其静默失效；推荐服务端/前端预处理首字、编辑器结构清理或 float + class 降级方案。
::first-letter 在富文本编辑器里基本不可靠，不是写法错，而是编辑器输出的 HTML 结构天然破坏它的生效前提。
为什么富文本编辑器里 ::first-letter 总是静默失效
编辑器（如 TinyMCE、CKEditor、Quill、或者基于 contenteditable 的自研方案）生成的段落几乎必然踩中全部失效条件：
- 首字符前带换行或空格：
<p>\n 今天天气很好</p>——::first-letter直接跳过 - 自动包裹内联标签：
<p><span>今</span>天天气很好</p>—— 伪元素无法穿透<span> - 段首插入零宽字符或注释：
<p><!-- editor-meta -->今天…</p> - 父容器被设为
display: flex或display: grid（常见于编辑器工具栏+内容区布局）——文本流已切断 - 用户粘贴内容时带全角标点开头，比如
《论语》曰…，::first-letter选中的是《而非“论”
真正能落地的三种做法（按推荐顺序）
放弃“纯 CSS 无侵入”的幻想，优先选可控性高的方案：
-
服务端/前端预处理首字：在保存或渲染前，用正则提取段落首个汉字（跳过
《【“『等常见中文标点），再手动包裹<span class="dropcap">今</span>。这是最稳定、可预测的方式 -
编辑器配置强制清理结构：TinyMCE 可配
forced_root_block: 'p'+format_on_paste: true；Quill 可 hooktext-change事件，用delta.ops[0].insert.match(/^[\u4e00-\u9fa5]/)检查并修正首字符 -
降级用 float + 显式 class：不依赖伪元素，改用
<p><span class="dropcap">今</span>天天气很好</p>，然后定义：.dropcap { float: left; font-size: 2.8em; line-height: 0.75; margin-right: 0.2em; } p { overflow: hidden; /* 清除浮动 */ }
initial-letter 能不能用？
不能作为主方案。它在 Chromium 117+ 和 Safari 16.4+ 支持，但 Firefox 完全不支持，且 initial-letter 本身不接受伪元素，写成 p::first-letter { initial-letter: 3; } 是无效的。若真要用，必须：<span class="dropcap">今</span> + @supports (initial-letter: 3) { .dropcap { initial-letter: 3; } }，再配合 ::first-letter 降级。实际项目中，维护两套逻辑成本远高于直接用 float。
立即学习“前端免费学习笔记（深入）”；
真正麻烦的不是 CSS 写三行，而是编辑器输出永远不干净、字体度量永远不一致、用户总能粘贴出你没预料到的开头——这些地方一出问题，::first-letter 就连报错都不会有。
