在标签中,我要更改行高:

<span class="text-header-huge" style="line-height: 90%;">
    XXX
    <br>
    XXX.
</span>


看起来不错,但是当我用浏览器突出显示文本时,会发生这种情况
css - &lt;span&gt;行高样式更改使浏览器突出显示困惑-LMLPHP

高亮部分应完全包裹文本。
我该如何解决?

最佳答案

我怀疑是否有一个简单可行的解决方案,因为浏览器希望根据字体大小设置选择的高度……或者那只是我很愚蠢(我不是这些事情的专家)。

尽管如果将文本分成一堆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>

09-10 07:23
查看更多