首字母下沉 | CSS-Tricks

可访问的方式

跨浏览器方式（额外标记）

只需将段落的第一个字符包裹在一个 span 中，然后使用 CSS 针对 span 进行样式设置。

<p>
  <span class="firstcharacter">L</span>
  orem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

.firstcharacter {
  color: #903;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

CSS3 方式（无需额外标记）

使用伪类选择器定位第一个段落的第一个字符。无需额外标记，但不支持 IE < 9。

<p>
  Just a normal sentence.
</p>

p:first-child:first-letter {
  color: #903;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

`initial-letter` 方式

在撰写本文时，initial-letter 的浏览器支持非常少，但它可以用来计算首字母下沉字母应该占据的行数和字体大小，而不是自己手动计算。

p:first-child:first-letter {
  color: #903; 
  font-family: Georgia;
  initial-letter: 2;
}

浏览器支持

此浏览器支持数据来自 Caniuse，其中包含更多详细信息。数字表示浏览器从该版本开始支持该功能。

桌面

Chrome	Firefox	IE	Edge	Safari
130	否	否	127	TP*

移动设备/平板电脑

Android Chrome	Android Firefox	Android	iOS Safari
127	否	127	18.0*

Lucas Tadeu

# 2010 年 3 月 20 日

这真是一个很棒的功能，以前真的不知道“first-letter”。谢谢您的提示！

andieevans

# 2010 年 3 月 26 日

实际上它在 ie8 中有点起作用。如果段落前面没有任何内容（例如），它就会起作用……

Ken Lasher

# 2010 年 4 月 4 日

第一个选项让您拥有更多控制权。我尝试了第二个选项，唯一获得首字母下沉的是页脚文本。这是一个很酷的功能。我来自印刷设计背景，我很怀念首字母下沉。以前我经常为此制作图像。太棒了！

rohit

# 2010 年 6 月 24 日

小巧但很棒

Theraisa K

# 2011 年 3 月 14 日

太棒了！我甚至没有想过在网站上使用首字母下沉，但现在看到它在实际中的作用，它在设计良好的网站中非常有用。

Graha Nurdian

# 2011 年 5 月 26 日

太赞了！很棒的技巧，伙计！:)

Zach Stone

# 2011 年 8 月 9 日

很棒的代码片段——我之前在 :first-letter 上遇到了跨浏览器问题，span 解决方案让我完美无瑕。谢谢！

andry

# 2011 年 8 月 19 日

非常感谢您的提示。

Alistair

# 2011 年 9 月 6 日

p:first-child:first-letter

这似乎不起作用。

Alistair

# 2011 年 9 月 6 日

抱歉，在惊叹发生时，我发表了混蛋评论。

在 Chrome 13.0.782.220 m 中测试

该选择器似乎不起作用。但是我注意到笔记本电脑上的此构建中还有其他错误。当打开多个标签时，浏览器中会留下奇怪的伪影。

dewadg

# 2011 年 11 月 30 日

这些步骤帮助了我。感谢您的教程！:)

Piotr Ślusarski

# 2012 年 1 月 30 日

谢谢！它有效！

Piotr Ślusarski

# 2012 年 1 月 30 日

顺便问一下：有哪些字体在首字母下沉中看起来特别好，可以推荐使用（除了 Georgia）？

WyldKard

# 2012 年 3 月 6 日

问题是首字母下沉也会显示在您页面的其他位置，例如在块级引用开头或页脚中。有没有办法将它_仅_限制在文档中的第一个字母？

那个家伙

评论永久链接# 2012 年 4 月 13 日

使用更具体的 CSS 选择器。例如，#maincontent p:first-child:first-letter {blah; blah;}

Frank Ebbert

# 2012 年 3 月 9 日

当然很棒！谢谢！

我有时会使用文本缩进作为段落。首字母下沉技术会产生一个奇怪的怪癖，即将缩进应用于使用首字母下沉的整个单词。因此，该单词与下面的文本行不对齐。为了避免这种情况，我将该段落的文本缩进设置为 0;。根据我的结构，我可能需要调整选择器。

对于 CSS3，我也要记住这一点：first-child 伪选择器会将首字母下沉应用于页面上的第一个 <p>。我见过一些布局非常出色，页面上有多个下沉。我还没有这样做，但我可以看到我需要删除 first-child 选择器，只使用 first-letter。

为精美的设计干杯。

Lyoniel

# 2012 年 3 月 10 日

.. 非常棒的技巧，太有用啦，谢谢！。

dianejwright

# 2012 年 3 月 27 日

大家好。关于页面上后续的首字母下沉应用，似乎组合器可以解决问题！我发现了这个：http://www.sitepoint.com/forums/showthread.php?585658-Pseudo-Class-first-child-Problem

那个家伙

# 2012 年 4 月 13 日

很棒的提示。在 Firefox 10 中完美运行。我的字体大小是以百分比形式设置的，因此我不得不进行一些调整才能使其在 Chrome 和 IE9 中正确显示。可能与各个浏览器渲染字体的机制有关。

我不得不添加 0.8em 的行高，并添加 -0.1em 的负底部边距才能使其在 Chrome 和 IE9 中正确显示。

Steliyan

# 2012 年 4 月 25 日

这个技巧可以在 WordPress 主题中使用吗？

Dan Eden

# 2012 年 4 月 27 日

我几乎可以确定 p:first-child:first-letter 在任何浏览器中都不起作用。至少，它在我的 Chrome 18、Safari 5.2、Firefox 11、Opera 11 中不起作用。

eric

评论永久链接# 2014 年 11 月 16 日

Dan，它应该像下面这样写

p:first-child::first-letter

你少了一个冒号。

Markus Reiter

# 2012 年 6 月 8 日

你应该使用 :first-of-type 而不是 :first-child。否则，“第一个子元素”可能是一个 <h1> 元素。

Anup Debnath

评论永久链接# 2013 年 3 月 20 日

我认为 .class>p:first-child:first-letter 是更好的方法。
Jason

评论永久链接# 2016 年 3 月 16 日

谢谢你，Markus！我一直对着键盘猛敲，最后 :first-of-type 起作用了！

Tim Baggaley

# 2012 年 6 月 18 日

我正在使用

 .content > p:first-of-type:first-letter {/* DROP CAP style */}

在 WP 主题中，它可以避免照片和/或其标题作为目标 div 中的第一个元素而造成混淆。我的问题是 IE9 - 它似乎没有注意到行高值，该值在包括 IE 8 和 IE 10 在内的所有其他我测试过的浏览器中都设置了垂直位置。我找不到调整 IE 9 中首字母下沉的垂直位置的方法 - 你能帮我吗？

我的网站地址是：http://graphicviolence.co.uk，我的首字母下沉 CSS 代码是

.art-postcontent > p:first-of-type:first-letter 
{
   letter-spacing:0;
   text-transform:uppercase;
   color:#250607;
   font-size:50px;
   font-weight:normal;
   float:left;
   margin:5px 5px -7px 0; /* THESE VALUES SET TXT WRAP AROUND DROP CAP */
   line-height:1; /* THIS SETS BASELINE POSITION OF DROP CAP */
}

谢谢
t

Gerry O'Neill

# 2012 年 7 月 30 日

@ Ken Lasher - 尽管迟了两年 - 无论如何，你最好使用以下类型选择器

.article>p:nth-of-type(1):first-letter

nth-of-type 是一种非常好的选择方法；)

Gerry O'Neill

评论永久链接# 2012 年 7 月 30 日

@ Ken Lasher - 尽管迟了两年 - 无论如何，你最好使用以下类型选择器

.article>p:nth-of-type(1):first-letter

nth-of-type 是一种非常好的选择方法；)

我的第一个评论中有一个拼写错误，我不得不修改；)

syahrul

# 2012 年 9 月 16 日

你在使用什么字体？

Kyle

# 2013 年 3 月 12 日

CSS Tricks 又救了场！当我不知道某些事情是否可以做的时候，我几乎总是先在这里查看。我不知道还有 first-letter 伪类。

感谢您提供此信息！

Rams

# 2013 年 3 月 31 日

我不知道你是如何 - 并且只有你 - 能够回答我在 3 年前的帖子中的问题！
感谢您分享知识

Tanner Campbell

# 2013 年 4 月 4 日

我需要将每个博客条目中第一段的第一个字母做成首字母下沉，并且需要与 IE8 兼容。我使用“+”选择器解决了这个问题。

#div A + B {}

如果你很精通，你可能只需看看我的 Codepen 就能明白：http://codepen.io/TannerCampbell/pen/vlDut

以下是对代码的简要解释

#column-left p:first-letter {
  font-size: 3em;
}

这将选中 #column-left id 内的所有 p 元素，并将其第一个字母做成首字母下沉。但是，如果你只想让第一个字符成为首字母下沉，这将毫无用处。通过添加前面的元素和“+”选择器，如下所示

#column-left h6 + p:first-letter {
  font-size: 3em;
}

你是在告诉浏览器，“嘿，浏览器。我想让你找到 #column-left 内的所有 p 元素，如果它们前面有一个 h6 标签，我想你让它们的第一个字母的字号为 3em。”

如果你在一个 div 或 id 内有多个相同布局的重复出现，这将很有用。例如，一个 WordPress 主题。

希望这对某些人有所帮助。祝您一切顺利！

最好的祝愿，
Tanner

Rams

评论永久链接# 2013 年 4 月 4 日

分享就是关爱，谢谢 (

Kenneth John

# 2013 年 5 月 27 日

谢谢，它真的帮助了我。我有一个问题，我需要添加一个

效果，但我还需要定义它的宽度，怎么做？

Al Augustin

# 2013 年 6 月 13 日

我们使用了一些 jQuery 来在所有浏览器中实现 CSS3 版本示例链接

Eric Jussaume

# 2013 年 9 月 23 日

首字母下沉代码片段非常有用。它简单易用，我在我的作品集网站 http://ejstudios.net 上使用了它，效果很好。只需将 CSS 代码片段放入外观 > 编辑器，并将 span 标签放入要显示它的页面文本的 html 代码中即可。

Alan Houser

# 2013 年 12 月 3 日

效果很好，除非你用引号开头。:D (截图 http://i.sqr.fr/SmMS )

Hyshka

# 2014 年 2 月 5 日

使用响应式单位，基准字号为 16px

font-size: 4.687em;
line-height: .8em;
padding-top: .25rem;
padding-right: .5rem;
padding-left: .187rem;
margin-bottom: -.1em;

Crispylogs

# 2014 年 3 月 24 日

只有在它前面没有其他元素时才会起作用。p 标签必须是 html 的第一个元素。

Ajay

评论永久链接# 2014 年 4 月 24 日

不完全是... 我是这样使用的 .content p:first-child:first-letter { ... }

只需在前面添加一些选择器来定位你想要的目标 p 标签...。
Lorenzo Matibag

评论永久链接# 2014 年 7 月 23 日

使用 .dropcaps:first-letter 即可。只需将 class=”dropcaps” 添加到你想显示首字母下沉的任何 p 标签即可。

Dave

# 2014 年 7 月 27 日

不幸的是（对我来说）似乎 first-letter 只能用于字母。当我尝试将其应用于以符号（☰）开头的文本时，它不起作用。但它对汉字起作用，所以它不限于 ASCII。我真的很需要一个 first-char 选择器。

William Hertling

# 2014 年 7 月 30 日

正如 Alan 所说，如果第一个字符是开头的引号，那么 first-letter 选择器效果就不太好（因为它会选中开头引号和下一个字母）。我试图复制我的设计师通常在打印中做的事情，即让初始引号变小，然后在其旁边添加一个首字母下沉。我尝试在第一个字母字符上使用 span 标签，但是这样首字母下沉就会漂浮在开头引号的左边，这是不好的。有什么建议吗？

Mark

# 2014 年 8 月 7 日

Dave，如果“符号”是一种字体，它将像任何其他字体一样工作。类似于 Dave 的“第一个字符被忽略”。使用 IE11，父元素为“details”，前置兄弟元素为“summary”。嗯，
“first-child” 伪类什么也不发生。甚至尝试了你的 < 和 > 管道。什么都没有。但是，需要注意的是，summary 和 details 元素都是 IE 的新元素，并且目前都不能直接伪造任何东西。只有“first-letter”适用于包含的“p”元素，其中 Ruby 和 HTML 相互兼容。但某些 DOM 标签还没有匹配... p.cap:first-letter {} 以及“一起，目前是唯一的选择。 first-child details summary

Cammy

# 2014 年 8 月 16 日

我同样也尝试用引号来实现这一点，但我只想让开头引号作为首字母下沉，而不是第一个字母。它在效果上是起作用的，但我对引号和第一个字母都做了首字母下沉 - 有没有人知道如何只对引号做首字母下沉，并且让文本从引号的顶部开始，而不是底部？

Bladeshatter

# 2015 年 2 月 5 日

CSS 函数

text-transform: capitalize;

不能用来将第一个字母大写吗？

CallMeIsmail

# 2015 年 4 月 3 日

“Dan，它应该像下面这样写

p:first-child::first-letter

你少了一个冒号。”

这听起来像一个令人不快的状况。

Raghava :)

# 2015 年 6 月 9 日

不错的文章。总的来说，网站上为设计师和开发人员提供了大量有价值的信息。

Dan

# 2015 年 8 月 20 日

如果我只想将首字母下沉应用到我的博客页面，但它在整个网站上都格式化了怎么办？例如，在我的摘要块、我的照片描述中等等。有没有办法限制它？我使用的是 squarespace，所以我只能使用 CSS 编辑。谢谢！

Max Parelius

# 2019 年 11 月 5 日

是否可以用 Flexbox 实现？

Starry Tacos

# 2022 年 11 月 10 日

是否可以像使用 float: left 一样，但同时使用 html{text-align: center;}？

可访问的方式

跨浏览器方式（额外标记）

CSS3 方式（无需额外标记）

initial-letter 方式

浏览器支持

桌面

移动设备/平板电脑

评论

发表评论 取消回复

`initial-letter` 方式

发表评论取消回复