如何利用HTML的CSS initial-letter属性实现段落首字母大号下沉排版-html教程-PHP中文网

initial-letter 是 css 实现首字母下沉的原生属性，chrome 117+、safari 16.4+ 支持，firefox 完全不支持；需满足块级容器、首子节点为纯文本、无 float/shape-outside 冲突三条件，配合 @supports 提供 ::first-letter 降级方案。

如何利用html的css initial-letter属性实现段落首字母大号下沉排版

initial-letter 是什么，浏览器支持现状如何

initial-letter 是 CSS 专门用于首字母下沉（drop cap）的原生属性，语法简单：initial-letter: 3; 表示首字母高度占 3 行，initial-letter: 3 2; 则额外指定下沉行数为 2 行（即首字母占据 3 行高度，但只向下偏移 2 行，留出 1 行与正文对齐）。但它不是“开箱即用”：Chrome 117+、Safari 16.4+ 支持，Firefox 仍完全不支持（截至 2024 年中），且仅作用于块级容器中的**第一个文本节点的首字符**——这意味着 <p><strong>A</strong>pple...</p> 中的 A 不会被选中，因为首节点是 <strong></strong> 元素而非纯文本。

实际写法：必须满足哪些前提条件

想让 initial-letter 生效，得同时满足三个硬性条件：

目标元素必须是块级容器（如 <p></p>、<div>），且其第一个子节点是**纯文本节点**（不能是标签） <li>首字符必须是可渲染的 Unicode 字符（字母、数字、标点均可，但空格、换行、<code> 不行）
不能和 float、shape-outside 等影响文本流的属性共存（否则会被忽略）

常见翻车现场：<p><span>T</span>ext...</p> —— 因为首节点是 <span></span>，initial-letter 直接失效；修复只需改成 <p>T<span>ext...</span></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter"><img src="https://img.php.cn/upload/skill/000/000/081/179232667384043.jpg" alt="html-to-pptx-converter" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="overflowclass">html-to-pptx-converter</a> <p class="overflowclass">使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。</p> </div> <a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>。

兼容 fallback 怎么写才不破坏布局

由于 Firefox 完全无视 initial-letter，必须提供降级方案。最稳妥的是用 ::first-letter 伪元素 + 手动定位，但要注意两点：

::first-letter 对 Unicode 复杂文字（如中文、阿拉伯文）支持不稳定，优先用于拉丁字母段落
必须显式设置 float: left 和 line-height 控制下沉效果，否则在 Safari/Chrome 中会和 initial-letter 叠加出双倍效果
推荐用 @supports 隔离：先写 ::first-letter fallback，再用 @supports (initial-letter: 1) { ... } 覆盖原生属性

示例片段：

p {
  initial-letter: 3;
}
@supports not (initial-letter: 1) {
  p::first-letter {
    float: left;
    font-size: 3em;
    line-height: 0.7;
    margin-right: 0.1em;
  }
}