如何在CSS中通过::first-letter制作首字下沉效果？-css教程-PHP中文网

::first-letter要生效必须同时满足三个条件：父元素为块级、首字符前无空白或标签、样式配齐float:left+line-height+font-size；否则浏览器会静默忽略。

如何在css中通过::first-letter制作首字下沉效果？

::first-letter 要真正“沉下去”，光写 font-size 和 color 没用，必须同时满足三个硬性条件：父元素是块级、首字符前无空白或标签、样式上配齐 float: left + line-height + font-size。

不是选择器写错了，而是浏览器直接忽略——它对 DOM 结构极其敏感：

父元素用了 display: flex 或 display: grid：文本流中断，伪元素静默失效
首字符前有换行、空格、HTML 注释（如 \n今天… 或 今天…）
首字符被、等内联标签包裹（如 今天… CSS婚礼策划服务机构宣传网站模板 CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。下载）
段落以《、【、“等全角标点开头：伪元素会选中它而非汉字，结果是引号被放大三倍

缺一不可，单改一个大概率错位或顶开下一行：

float: left：唯一能触发文字环绕的属性；不加它，首字只是变大，正文不会绕排
line-height: 0.75（无单位）：必须显式设置；继承父级 line-height: 1.6 会让放大后的首字撑高整行，第二行文字直接被顶开甚至重叠
font-size: clamp(2rem, 4vw, 3.5rem)：响应式推荐；固定值至少用 2.5em，2em 在多数中文字体下视觉下沉感极弱

中文没有大小写，字体基线不统一，纯 CSS 几乎无法兜底：

全角标点开头无法跳过：::first-letter 不支持“跳过第一个字符”，服务端需正则预处理（如 /^[\u3000-\u303f\uf900-\uf9fc\uff00-\uffef\u2000-\u206f\uff01-\uff5e]+/），或前端 JS 动态包裹首汉字
某些中文字体（如思源宋体）ascender 偏高，仅调 line-height 不够，可加 margin-bottom: -0.2em 微调；但慎用 margin-top，可能触发新 BFC 导致整段偏移
父必须加 overflow: hidden 清除浮动，否则后续段落会上移、重叠；clear: both 需额外 DOM 节点，不推荐