咨询可实现MS Word式首字下沉（Drop Cap）效果的HTML标签

嘿，刚好做过类似的需求！HTML本身没有专门的原生标签来实现首字下沉，但咱们可以用CSS配合基础HTML元素轻松复刻MS Word里的Drop Cap效果，给你两种最实用的方案：

方案1：使用:first-letter伪元素（推荐） #

这是最简洁的方法，不需要额外修改HTML结构，直接用CSS伪元素选中段落的第一个字母：

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

对应的CSS：

p::first-letter {
  float: left;
  font-size: 3em; /* 首字大小，根据需求调整 */
  line-height: 0.8; /* 行高，让首字和正文对齐更自然 */
  margin-right: 8px; /* 首字和正文之间的间距 */
  color: #2c3e50; /* 可选：给首字换个颜色 */
  font-weight: bold; /* 可选：加粗首字 */
}

原理说明： #

• float: left 让首字母向左浮动，自动占据多行空间，实现“下沉”的视觉效果
• 调整font-size和line-height可以让首字和正文排版更协调
• margin-right避免首字和正文挤在一起，提升可读性

方案2：用<span>包裹首字母（更灵活） #

如果需要给首字母添加交互（比如点击跳转）或者更复杂的样式，直接用<span>包裹首字母是更稳妥的选择：

<p>
  <span class="drop-cap">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

对应的CSS：

.drop-cap {
  float: left;
  font-size: 3em;
  line-height: 0.8;
  margin-right: 8px;
  /* 可以加更多自定义样式，比如： */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
  border-right: 2px solid #3498db;
  padding-right: 8px;
}

额外优化建议： #

• 可以给段落设置text-indent: 0避免默认的首行缩进影响效果
• 如果是多段落的文章，给需要首字下沉的段落加个类（比如.drop-cap-paragraph），避免全局生效
• 响应式场景下，可以用媒体查询缩小首字尺寸，适配移动端：

@media (max-width: 768px) {
  .drop-cap, p::first-letter {
    font-size: 2em;
    margin-right: 6px;
  }
}

内容的提问来源于stack exchange，提问作者Aqsa Shahzadi