分享
三行代码  ›  专栏  ›  技术社区  ›  Roman Pokrovskij

如何在不增加整个文本行高度的情况下增加一个字符的字体大小? - css: how to increase one character font-size without increasing whole text line-height?

  •  0
  • Roman Pokrovskij  · 技术社区  · 3 月前

    我有另一个符号 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>
    2 回复  |  直到 3 月前
        1
  •  1
  •   vicbyte    3 月前

    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>
        2
  •  1
  •   Temani Afif    3 月前

    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>