如何解决在<span>元素中溢出的字形？

Question

很容易从try_files元素中溢出文本，尤其是（但不限于）斜体字体。我知道这是可以预料的，因为箱形模型根据字形的提前宽度而不是其总宽度来确定元素的大小。

但是，如果我想确保所有像素都在盒子里面，该怎么做？我尝试过<span>，对内容（在最后一个“ f”之后）使用各种后缀，例如display: inline-block或<wbr>，但似乎没有任何效果。有没有办法完全“清除”盒子？

Answer 1

去那里，这就像魅力！

  

在padding上设置一些span

https://stackoverflow.com/questions/59264675/how-to-fix-glyphs-overflowing-in-span-elements?noredirect=1#

.span-txt {
    border: 1px solid;
    font-style: italic;
    padding: 0 4px 0 0;
    display: inline-block;
}

<span class="span-txt">this "f" hangs over → f</span>