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

Question

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

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

我知道 "severing" 带有 position:absolute 的字符，但这也水平 shift 文本。当我想要的是 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>

Answer 2

创建元素inline-block然后你可以只调整那个字符的line-height:

.increased {
  font-size:200%;
  line-height:0.2;
  display:inline-block;
}

<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>

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

css: how to increase one character font-size without increasing whole text line-height?

html

css

css-position