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

Question

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

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

我知道如何使用 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>