在标签中,我要更改行高:
<span class="text-header-huge" style="line-height: 90%;">
XXX
<br>
XXX.
</span>
看起来不错,但是当我用浏览器突出显示文本时,会发生这种情况
高亮部分应完全包裹文本。
我该如何解决?
最佳答案
我怀疑是否有一个简单可行的解决方案,因为浏览器希望根据字体大小设置选择的高度……或者那只是我很愚蠢(我不是这些事情的专家)。
尽管如果将文本分成一堆inline-block
,则可以选择更多或更少的内容。我的版本并不完美,但至少可以突出显示整个行。希望对您有所帮助:https://jsfiddle.net/6ue441kz/69/
.text-header-huge {
display: inline-block;
font-family: 'Titillium Web', sans-serif;
font-weight: 900;
font-size: 120px;
line-height: 80%;
background-color: pink;
}
.text-header-huge span {
display: inline-block;
background-color: yellow;
}
<div class="text-header-huge">
<span>
XXX
</span>
<br>
<span>
XXX
</span>
<br>
<span>
XXX
</span>
</div>