Question

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

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

我知道用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：如何在不增加整个文本行高的情况下增加一个字符的字体大小？

2 个答案: