css - 行高样式更改扰乱了浏览器突出显示

Question

在一个标签中我正在改变行高:

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

看起来不错，但是当我用浏览器突出显示文本时，会发生这种情况

突出显示应完全包围文本。我该如何解决这个问题？

Answer 1

我怀疑是否有一个简单的可能的解决方案，因为浏览器看起来根据字体大小设置选择的高度 ...或者那只是我傻(我不是专家在这些事情中)。

不过，如果您将文本分成一堆 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>