CODEWITHSUNDEEP
htmlcss
user13900804
user13900804

Reputation: 31

How to make first letter of paragraph bigger without stretching the content

I have a paragraph with some text and I need to make the first letter bigger than the rest, I know how to make it and it works, but the way that I am doing it adds an extra space between the first sentence and the rest of the content:

How can I make the letter big but without adding this extra space?

.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>

Upvotes: 1

Views: 4324

Answers (3)

Penny Liu
Penny Liu

Reputation: 17498

A straightforward approach involves the utilization of the initial-letter CSS property to enhance the design.

p:first-letter {
  font-size: 40px;
  color: #e80222;
  font-weight: bold;
  /* Initial letter occupies 2 lines and sinks 1 line */
  initial-letter: 2 1;
}

p:nth-of-type(2):first-letter {
  font-size: 40px;
  color: red;
  font-weight: bold;
  /* Initial letter occupies 2 lines */
  initial-letter: 2;
}
<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>
While cinema chains in many key markets including the U.S. — already pressured by the rise of streaming services — have struggled to attract patrons back to their padded seats following the lifting of COVID-19 curbs, in Southeast Asia it’s a far more promising picture: Local box office records are being set, filmmaking grants are being unveiled and large cinema chains are shifting into expansion mode.
</p>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 274318

Set a fixed line-height on main element and the first-letter will inherit it. This will work for all the font-size configuration

.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>

Upvotes: -1

disinfor
disinfor

Reputation: 11558

You can adjust the line-height for that letter and it will close the gap:

.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>

Upvotes: 2

Related Questions