如何使用 css 降低文本选择背景的高度？答案

【问题标题】：How to decrease the height of the text selection background using css?如何使用 css 降低文本选择背景的高度？
【发布时间】：2020-09-05 07:10:31
【问题描述】：

$('#description').mouseup(function(e) {
  textSelected = window.getSelection().getRangeAt(0).extractContents()
    var span= document.createElement("span");
    span.style.backgroundColor = "yellow";
    span.appendChild(textSelected);
    window.getSelection().getRangeAt(0).insertNode(span);
})

#description {
  line-height: 4em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='description'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut egestas leo, nec ultricies purus. Cras hendrerit ex tellus, ut mattis mauris ultrices vel. Sed iaculis leo sit amet laoreet posuere.</div>

我有一个 div，里面有几行文字。我增加了行高，这也增加了文本选择背景的高度。下面的图片可能会更好地解释它：

text-selection-background-height

text-selection-gif

我可以将它的颜色从蓝色更改为所需的颜色，但无法降低文本选择背景的高度。

【问题讨论】：

标签： javascript html jquery css

【解决方案1】：

好的，试试

    <div id='description'>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> 
    <span>Fusce ut egestas leo, nec ultricies purus.</span> 
    <span>Cras hendrerit ex tellus, ut mattis mauris ultrices vel. Sed iaculis leo sit amet laoreet posuere.</span>
    </div>

#description span{
display:inline-block;
margin-bottom:20px;
}

因此您可以在行之间设置空格，但如果可能的话，您需要将其包装在标签内！并更改空格而不是使用行高到边距！

【讨论】：

【解决方案2】：

使用纯 CSS，您无法将 line-height 和 ::selection。只有少数属性可供选择：

https://developer.mozilla.org/en-US/docs/Web/CSS/::selection#Allowable_properties

你的逻辑是正确的，但:selection 应该是::selection。如果你做更改后，默认选择背景将完全消失。

::selection {
  text-shadow: 1px 1px 2px #b040b0;
}

::selection 是伪元素，不是伪类。它需要两个冒号 (::)，不像伪类只需要一个 (more from MDN here)。

由于您已经使用 JavaScript 用 <span> 和突出显示它们，现在唯一的视觉样式将是您的黄色突出显示和新的文字阴影。

关于可访问性和用户体验的说明：

我不知道你在建造什么或它是为谁建造的，但我觉得有必要提一下这里有几点。

注意考虑用户界面的颜色对比度。黄色的对白色将无法区分到很大一部分人口：

https://webaim.org/resources/contrastchecker/?fcolor=FFFF00&bcolor=FFFFFF

另一方面，想想将使用您的界面的人。如果他们突出显示一些文本，他们会明白 text-shadow 代表浏览器选择与黄色突出显示是别的东西吗？他们会了解黄色突出显示的文本不是在他们复制时将被复制的内容按Control-c？（等等）

同样，这可能不适用于您的情况，但这些东西很难保持当你在构建很酷的花哨的东西时，请记住。

【讨论】：