避免CSS突出显示选择重叠 [英] Avoid Highlight Selection Overlap with CSS

问题描述

当我选择的行高度小于 font-size 的文本时，如何避免突出显示重叠?

How can I avoid a highlight overlap when I select the text that has a line-height lower than the font-size?

示例:

*::selection {
  background-color: grey;
}

p {
  font-size: 24px;
  line-height: 20px;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

我能够解决此问题的唯一方法是使 background-color transparent 透明，并仅更改文本颜色.我仍然想保留背景颜色.

The only way I've been able to solve this is by making the background-color transparent and just changing the text color. I'd like to still have the background color though.

示例

*::selection {
  background-color: transparent;
  color: red;
}

p {
  font-size: 24px;
  line-height: 20px;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

推荐答案

我认为没有办法，选择背景必须覆盖整个字母，包括所有特殊字符，例如ƒ，È，¡和等等.

I don't think there is a way, the selection background has to cover the whole alphabet, including all the special characters like ƒ, È, ¡, and so on.

这篇关于避免CSS突出显示选择重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！