css：如何在不增加整个文本行高的情况下增加一个字符的字体大小？

Question

我有其他符号font-family，需要调整其大小。不幸的font-size:200%是增加整行的行高；

如何font-size在不增加的情况下增加一个字符line-height？

我知道如何“切断”角色，position:absolute但这也会水平移动文本。当我想要的是某种线条时line-height: inherit（这不起作用）。

.increased {
  font-size:200%
}

<p>normal</p>
<div style="background-color:yellow">.text text text text text text text text text text  text text text text text text text text text text  text text text text text  text text text text text  </div>
<p>increased (problematic)</p>
<div style="background-color:yellow"> <span class="increased">.</span>text text text text text text text text text text  text text text text text text text text text text  text text text text text  text text text text text  </div>

Answer 1

如果您确定它不是该行中的唯一字符，则可以使用line-height: 0。否则，您将必须手动调整line-height值。

.increased {
  font-size: 200%;
  line-height: 0
}

<p>normal</p>
<div style="background-color:yellow">.text text text text text text text text text text  text text text text text text text text text text  text text text text text  text text text text text  </div>
<p>increased (problematic)</p>
<div style="background-color:yellow"> <span class="increased">.</span>text text text text text text text text text text  text text text text text text text text text text  text text text text text  text text text text text  </div>