How to fix the extending line-height when using a "bottom-right quotation mark"?

AGamePlayer 0
Viewed 24

Here is the HTML code:

div {font-size:1.5em}
div b {font-size:2em}
div {width:360px; border:1px solid red}
<div><b>“</b>The real test is not whether you avoid this failure, because you won't. It's whether you let it harden or shame you into inaction, or whether you learn from it; whether you choose to persevere.<b>„</b></div>


<div><b>“</b> The quick brown fox jumps over the lazy dog... 
  The quick brown fox jumps over the lazy dog... 
  The quick brown fox jumps over the lazy dog.. 
  The quick brown fox jumps over the lazy dog.
  The quick brown fox jumps over the lazy dog.. 
  The quick brown fox jumps over the lazy dog.
 <b>„</b></div>

The last line will have a higher height which looks quite weird.

Is there any way to fix this?

css html
3 Answers

Use the <blockquote> element for blockquotes. Or <q> for short quotes. Don't add the quotation marks with markup, add them via CSS.

blockquote {
  font-size: 1.5em;
  width: 360px;
  border: 1px solid red
}

blockquote::before {
 content: "“";
}

blockquote::after {
  content: "„";
}
<blockquote>The real test is not whether you avoid this failure, because you won't. It's whether you let it harden or shame you into inaction, or whether you learn from it; whether you choose to persevere.</blockquote>


<blockquote> The quick brown fox jumps over the lazy dog... The quick brown fox jumps over the lazy dog... The quick brown fox jumps over the lazy dog.. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.. The quick brown fox
  jumps over the lazy dog.
</blockquote>

cloned0

Try adding line-height: 0; to the element

div {font-size:1.5em}
div b {font-size:2em}
div {width:360px; border:1px solid red}
.myspace {line-height: 0}
<div><b>“</b>The real test is not whether you avoid this failure, because you won't. It's whether you let it harden or shame you into inaction, or whether you learn from it; whether you choose to persevere.<b class = "myspace">„</b></div>


<div><b>“</b> The quick brown fox jumps over the lazy dog... 
  The quick brown fox jumps over the lazy dog... 
  The quick brown fox jumps over the lazy dog.. 
  The quick brown fox jumps over the lazy dog.
  The quick brown fox jumps over the lazy dog.. 
  The quick brown fox jumps over the lazy dog.
 <b class = "myspace">„</b></div>

Rizeen0

Try to use last-child CSS to b tag

div {font-size:1.5em}
div b {font-size:2em}
div {width:360px; border:1px solid red}
div b:last-child {
  line-height: 0;
}
<div><b>“</b>The real test is not whether you avoid this failure, because you won't. It's whether you let it harden or shame you into inaction, or whether you learn from it; whether you choose to persevere.<b>„</b></div>


<div><b>“</b> The quick brown fox jumps over the lazy dog... 
  The quick brown fox jumps over the lazy dog... 
  The quick brown fox jumps over the lazy dog.. 
  The quick brown fox jumps over the lazy dog.
  The quick brown fox jumps over the lazy dog..
  The quick brown fox jumps over the lazy dog.
 <b>„</b></div>

Meghna Bhuptani0
Related