<span>线条高度样式改变了浏览器突出显示的混乱

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>