如何使用CSS伪元素::first-letter制作传统报纸风格的首字下沉？-css教程-PHP中文网

::first-letter常不生效是因为它仅作用于块级容器内首个可渲染字母，要求父元素为block/inline-block、禁用flex/grid、首字符前无空白或内联标签，且需显式设置float、font-size等有限样式。

如何使用css伪元素::first-letter制作传统报纸风格的首字下沉？

为什么`::first-letter`在现代浏览器里常不生效？

它只对块级元素（或被设为display: block的元素）生效，且必须是“可格式化的文本节点”的第一个字母。常见失效场景包括：父容器用了display: flex或display: grid、首字符被<span></span>包裹、内容开头有空格或换行符、或用了text-transform: uppercase但未同步设置::first-letter样式。

确保目标元素是块级，比如p、div，不要套在inline容器里
移除首字符前所有空白（用trim()处理HTML或CSS中加white-space: pre-line）
避免用float以外的方式干扰布局——::first-letter本身不支持flex或grid子项定位

`::first-letter`能设置哪些样式？哪些不能？

它支持有限的CSS属性：字体相关（font-size、font-weight、font-family）、颜色（color）、背景（background）、边框（border）、内边距（padding）、外边距（margin）、浮动（float）和文本装饰（text-decoration）。但不支持transform、position、display（除inline外）、width/height（除非配合float）。

要实现下沉效果，必须用float: left + font-size放大 + line-height控制行距
margin可以微调位置，但top/bottom无效
如果需要阴影或圆角，得靠border和background模拟，别试box-shadow（多数浏览器忽略）

报纸风格首字下沉的最小可行CSS写法

核心是让首字“浮出”段落左上，并撑开足够行高，同时保持后续文字环绕。典型做法：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

给段落加line-height: 1.4（避免文字挤到下沉字下方）
p::first-letter { float: left; font-size: 3em; line-height: 0.8; margin-right: 0.2em; }
若需衬线字体+粗体，补上font-family: "Times New Roman", serif;和font-weight: bold;
中文注意：部分字体下em单位对汉字不够稳定，可改用font-size: 48px并配line-height: 36px

p {
  line-height: 1.5;
}
p::first-letter {
  float: left;
  font-size: 3.2em;
  line-height: 0.75;
  margin-right: 0.15em;
  font-family: "Georgia", serif;
  font-weight: bold;
  color: #1a1a1a;
}