HTML编辑器怎么做首字下沉？CSS伪元素应用指南-html教程-PHP中文网

::first-letter 在富文本编辑器中基本不可靠，因编辑器生成的 HTML 常含首字符前换行/空格、内联标签包裹、零宽字符、flex/grid 布局及全角标点开头等问题，导致其静默失效；推荐服务端/前端预处理首字、编辑器结构清理或 float + class 降级方案。

html编辑器怎么做首字下沉？css伪元素应用指南

::first-letter 在富文本编辑器里基本不可靠，不是写法错，而是编辑器输出的 HTML 结构天然破坏它的生效前提。

为什么富文本编辑器里 ::first-letter 总是静默失效

编辑器（如 TinyMCE、CKEditor、Quill、或者基于 contenteditable 的自研方案）生成的段落几乎必然踩中全部失效条件：

首字符前带换行或空格：\n 今天天气很好 —— ::first-letter 直接跳过
自动包裹内联标签：今天天气很好 —— 伪元素无法穿透
段首插入零宽字符或注释：今天… 财经HTML高端海报生成复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP 下载
父容器被设为 display: flex 或 display: grid（常见于编辑器工具栏+内容区布局）——文本流已切断
用户粘贴内容时带全角标点开头，比如 《论语》曰…，::first-letter 选中的是《而非“论”

真正能落地的三种做法（按推荐顺序）

放弃“纯 CSS 无侵入”的幻想，优先选可控性高的方案：

服务端/前端预处理首字：在保存或渲染前，用正则提取段落首个汉字（跳过 《【“『 等常见中文标点），再手动包裹 今。这是最稳定、可预测的方式
编辑器配置强制清理结构：TinyMCE 可配 forced_root_block: 'p' + format_on_paste: true；Quill 可 hook text-change 事件，用 delta.ops[0].insert.match(/^[\u4e00-\u9fa5]/) 检查并修正首字符

降级用 float + 显式 class：不依赖伪元素，改用 今天天气很好，然后定义：

.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; } 是无效的。若真要用，必须：今 + @supports (initial-letter: 3) { .dropcap { initial-letter: 3; } }，再配合 ::first-letter 降级。实际项目中，维护两套逻辑成本远高于直接用 float。

真正麻烦的不是 CSS 写三行，而是编辑器输出永远不干净、字体度量永远不一致、用户总能粘贴出你没预料到的开头——这些地方一出问题，::first-letter 就连报错都不会有。