<span> 行高样式更改与浏览器突出显示混淆答案

【问题标题】：<span> line height styling change messing with browser highlighting<span> 行高样式更改与浏览器突出显示混淆
【发布时间】：2017-05-25 13:24:35
【问题描述】：

在标签中我正在更改行高：

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

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

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

【问题讨论】：

这通常是您的网络字体的结果。你用的是什么网络字体？去掉line-height是否存在问题？
@Robotnicka 我正在使用网络字体Titillium Web
这里是fiddle的问题
@zgood 谢谢你，下次我一定会这样做
这是一个很好的问题，我不确定你想要的 line-height 是否可行。它基本上是从上面的文字中删除的。 Mozilla 开发文档：developer.mozilla.org/en-US/docs/Web/CSS/::selection 涵盖了可能受选择伪类影响的内容：颜色、背景颜色、光标、轮廓、文本装饰、文本强调颜色和文本阴影。

标签： css highlight line-breaks

【解决方案1】：

我怀疑是否有一个简单的解决方案，因为浏览器会根据字体大小设置 选择的高度 ...或者这只是我很傻（我不是大师在这些事情上）。

尽管如果你把你的文本分成一堆inline-block's，你可以或多或少地选择一些东西。我的版本并不完美，但至少它突出了整行。希望对您有所帮助：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>

【讨论】：