如何解决使用右下引号时行高被拉长的问题？

问题根源是大字号的右下引号作为行内元素，撑开了所在行的行高，导致最后一行显示怪异。以下是几种实用的修复方案：

方案1：绝对定位脱离文档流 #

通过绝对定位让引号脱离正常文档流，避免影响行高，同时父元素设置相对定位确保引号位置正确：

div {
  font-size: 1.5em;
  width: 360px;
  border: 1px solid red;
  position: relative;
  padding-right: 0.5em; /* 为右侧引号预留空间 */
}
div b {
  font-size: 2em;
}
/* 定位右下引号 */
div b:last-child {
  position: absolute;
  right: 0;
  bottom: 0;
}

HTML无需修改，引号会固定在段落右下角，不再影响行高。

方案2：调整垂直对齐与行高 #

通过vertical-align让引号与文本基线/底部对齐，配合缩小行高来降低对行高的影响：

div {
  font-size: 1.5em;
  width: 360px;
  border: 1px solid red;
}
div b {
  font-size: 2em;
}
div b:last-child {
  vertical-align: bottom; /* 可选值：baseline、text-bottom */
  line-height: 0.8; /* 缩小行高，进一步减少影响 */
}

这个方案不需要修改布局结构，仅通过样式调整就能解决问题。

方案3：用CSS伪元素生成引号 #

将引号通过伪元素::before/::after生成，结构更简洁，样式控制更灵活：

div {
  font-size: 1.5em;
  width: 360px;
  border: 1px solid red;
  position: relative;
  padding-left: 0.5em;
  padding-right: 0.5em;
}
/* 生成左上引号 */
div::before {
  content: "“";
  font-size: 2em;
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
}
/* 生成右下引号 */
div::after {
  content: "„";
  font-size: 2em;
  font-weight: bold;
  position: absolute;
  right: 0;
  bottom: 0;
}

HTML可以简化为纯文本内容，不需要额外的<b>标签：

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

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

内容的提问来源于stack exchange，提问作者AGamePlayer