css 如何使第一个字母的段落更大,而不拉伸的内容

bqf10yzr  于 2023-03-05  发布在  其他
关注(0)|答案(2)|浏览(107)

我有一段文字,我需要让第一个字母比其他字母大,我知道怎么做,它的工作,但我这样做的方式增加了第一句话和其余内容之间的额外空间:

我怎样才能使字母变大而不增加额外的空格呢?

.first-word-uppercase-p::first-letter {
  font-size: 40px;
  color: #e80222;
  font-weight: bold;
}
<p class="first-word-uppercase-p">
  There is no doubt that people find out who they really are when their backs are against the wall. Such was the case for Sara Owen, a single mother who found herself without the ability to make ends meet and provide for her three children. "I wasn't broke,
  but times were tough," says Sara, who even found herself having to hide from her landlord on occasion. But everything changed when Sara decided that she was going to take her destiny into her own hands. "I was thinking about investing in stocks for
  several years, but I could never find the courage to do it. Little did I know that I would turn $200 into $2000 in only a matter of days.
</p>
s5a0g9ez

s5a0g9ez1#

您可以调整该字母的line-height,它将关闭间隙:

.first-word-uppercase-p::first-letter {
  font-size: 40px;
  color: #e80222;
  font-weight: bold;
  line-height: .75;
}
<p class="first-word-uppercase-p">
  There is no doubt that people find out who they really are when their backs are against the wall. Such was the case for Sara Owen, a single mother who found herself without the ability to make ends meet and provide for her three children. "I wasn't broke,
  but times were tough," says Sara, who even found herself having to hide from her landlord on occasion. But everything changed when Sara decided that she was going to take her destiny into her own hands. "I was thinking about investing in stocks for
  several years, but I could never find the courage to do it. Little did I know that I would turn $200 into $2000 in only a matter of days.
</p>
sr4lhrrt

sr4lhrrt2#

在main元素上设置一个固定的line-height,第一个字母将继承它。这将适用于所有font-size配置

.first-word-uppercase-p {
  line-height:1.2em;
}

.first-word-uppercase-p::first-letter {
  font-size: 40px;
  color: #e80222;
  font-weight: bold;
}

.first-word-uppercase-p.bigger::first-letter {
  font-size:50px;
}
<p class="first-word-uppercase-p">
  There is no doubt that people find out who they really are when their backs are against the wall. Such was the case for Sara Owen, a single mother who found herself without the ability to make ends meet and provide for her three children. "I wasn't broke,
  but times were tough," says Sara, who even found herself having to hide from her landlord on occasion. But everything changed when Sara decided that she was going to take her destiny into her own hands. "I was thinking about investing in stocks for
  several years, but I could never find the courage to do it. Little did I know that I would turn $200 into $2000 in only a matter of days.
</p>

<p class="first-word-uppercase-p bigger">
  There is no doubt that people find out who they really are when their backs are against the wall. Such was the case for Sara Owen, a single mother who found herself without the ability to make ends meet and provide for her three children. "I wasn't broke,
  but times were tough," says Sara, who even found herself having to hide from her landlord on occasion. But everything changed when Sara decided that she was going to take her destiny into her own hands. "I was thinking about investing in stocks for
  several years, but I could never find the courage to do it. Little did I know that I would turn $200 into $2000 in only a matter of days.
</p>

相关问题