如何将CSS首字下沉效果限制为仅多行填充段落生效？

纯CSS目前没有原生选择器可以直接匹配渲染行数、词数符合条件的段落，以下是两类生产环境可用的方案，按需选就行：

方案1：无JS纯CSS兜底（适配绝大多数内容站场景） #

利用段落渲染高度做阈值判断，单行段落高度和单倍行高一致，我们给首个段落设置最小高度门槛，只有高度超过2行的段落才会应用首字下沉，代码直接替换原有样式即可：

article:first-of-type p:first-of-type {
  /* 先固定段落行高，方便计算高度阈值 */
  line-height: 1.6;
  /* 最小高度设为2.5倍行高，留少量容错空间，过滤所有单行段落 */
  min-height: calc(2.5 * 1.6em);
}

article:first-of-type p:first-of-type:first-letter{
  font-size: 3em;
  margin: 0;
  padding: 0;
  line-height: 1em;
  float: left;
}

注意：如果你的段落本身设置了固定高度、上下内边距，需要对应调整min-height的计算值，避免误判。

方案2：轻量JS精准控制（严格匹配行数/词数规则） #

如果需要严格按照「内容不少于20词」「行数超过1行」的规则生效，加10行以内的原生JS做类名标记即可，无任何依赖，不影响页面性能：

document.addEventListener('DOMContentLoaded', () => {
  const targetP = document.querySelector('article:first-of-type p:first-of-type');
  if (!targetP) return;

  // 统计词数：按空白符拆分，适配英文内容
  const wordCount = targetP.textContent.trim().split(/\s+/).length;
  // 统计实际渲染行数：元素总高度 / 计算后行高
  const computedLineHeight = parseFloat(getComputedStyle(targetP).lineHeight);
  const renderLineCount = Math.round(targetP.offsetHeight / computedLineHeight);

  // 同时满足词数≥20、行数>1时，添加类名激活首字下沉
  if (wordCount >= 20 && renderLineCount > 1) {
    targetP.classList.add('apply-dropcap');
  }
})

对应把CSS的生效范围调整为带标记类的段落：

article:first-of-type p.apply-dropcap:first-letter{
  font-size: 3em;
  margin: 0;
  padding: 0;
  line-height: 1em;
  float: left;
}

如果是中文站点，把词数判断逻辑替换为targetP.textContent.trim().length >= 30（按30字符以上阈值调整即可）。

补充说明 #

目前CSS规范里还没有正式支持的「按行数匹配元素」「按内容长度匹配元素」的选择器，网传的::nth-line()、结合:has()的奇技淫巧要么处于草案阶段，要么主流浏览器兼容性不足，不适合在生产环境用。

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