如何使用css降低文本選擇背景的高度？

Question

 $('#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。 我增加了行高，這也增加了文本選擇背景的高度。 下面的圖片可能會更好地解釋它：

文本選擇背景高度

文本選擇-gif

我可以將它的顏色從藍色更改為所需的顏色，但無法降低文本選擇背景的高度。

Answer 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;
}

因此您可以在行之間設置空格，但如果可能，您需要將其包裝在標簽內！ 並更改空格而不是使用行高到邊距！

Answer 2

使用純 CSS，您無法將::selection的line-height和 height 解耦。 只有少數屬性允許選擇：

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

你的邏輯是正確的，但:selection應該是::selection 。 如果您進行更改，默認選擇背景將完全消失。

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

::selection是一個偽元素，而不是一個偽類。 它需要兩個冒號（ :: ），不像偽類只需要一個（ 更多來自 MDN here ）。

由於您已經使用 JavaScript 用<span>包裹所選元素並突出顯示它們，因此現在唯一的視覺樣式將是您的黃色突出顯示和新的文本陰影。

關於可訪問性和用戶體驗的注意事項：

我不知道你在建造什么或者它是為了誰，但我覺得有必要在這里提幾點。

請注意考慮用戶界面的顏色對比度。 大部分人口無法區分黃色和白色：

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

另一方面，請考慮將使用您的界面的人。 如果他們高亮顯示某些文本，他們會理解 text-shadow 代表瀏覽器選擇，而黃色高亮代表其他內容嗎？ 他們會明白黃色突出顯示的文本不是按 Control-c 時將復制的內容嗎？ （等等。）

同樣，這可能不適用於您的情況，但是當您構建很酷的奇特東西時，很難記住這些事情。