html 中的文本有一个line-height
属性,它决定了给字符多少垂直间距
。默认情况下,字体大小
和垂直间距
不匹配。如果 span
的字体大小为 50px
,则 50px
的 line-height
将在底部和顶部产生间距的文本。
http://jsfiddle.net/7vNpJ/773/
您可以通过手动调整 line-height
来解决这个问题,例如在这个例子中:
http://jsfiddle.net/7vNpJ/774/
<span>
BIG TEXT
</span>
span {
display: inline-block;
font-size: 50px;
background-color: green;
line-height:0.7;
}
0.7 的行高仅适用于该特定字体。我正在寻找一种自动执行此操作的方法,而不管应用的字体如何。
所以基本上我正在寻找方程式或程序来设置字体大小和行高,以便顶部和底部的间距为零。你建议我做什么?包含许多字体的匹配行高的库也可以解决问题。
最佳答案
你可以这样试试。这段代码可能对您有帮助:
var fontSize = $('.lineHeightCss').css('font-size').split('px')[0];
var t = fontSize/100*1.42857;
$('.lineHeightCss').css('line-height',t>0?.7:t);
span {
display: inline-block;
font-size: 100px;
background-color: green;
line-height:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="lineHeightCss">
BIG TEXT
</span>
关于javascript - 自动设置 line-height 使顶部和底部没有间距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47550274/