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

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?

CodePudding user response：

Use the element for blockquotes. Or 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>

CodePudding user response：

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>

CodePudding user response：

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>