时间戳

首页 > 解决方案 > css：如何在不增加整个文本行高的情况下增加一个字符的字体大小？

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

问题描述

我有一个来自其他的符号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>

标签： htmlcsscss-position

解决方案

如果您确定它不是该行中的唯一字符，则可以使用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>

推荐阅读