阻止元素参与文本选择 [英] Prevent element from taking part in text selection

问题描述

我在< pre>< code> 中有一些源代码，在单独的< div> 。当选择文本时，行号随之而来，并随后被复制。是否有任何方法来防止行号作为选择的一部分，即使我选择的元素上面和下面的源代码块？

I have some source code in a <pre><code> with line numbers in a separate <div>. When the text is selected, the line numbers come with it, and are subsequently copied. Is there any way to prevent the line numbers from being a part of the selection, even if I select the elements above and below the source code block?

我想避免JavaScript为了浏览它的人的利益。 （使用JavaScript，我将添加一个按钮隐藏行号）。

I'd like to avoid JavaScript for the benefit of people who browse with it off. (With JavaScript, I'd add a button to hide the line numbers).

unselectable =on并且各种供应商特定的用户选择 CSS属性不起作用;

unselectable="on" and the various vendor-specific user-select CSS properties did not work; the numbers are still selected and copied.

推荐答案

提供要阻止选择ID的元素。

Give the element you want to prevent selection of an id.

然后把它放在你的CSS中：

Then put this in your CSS:

#id-name {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}
::-moz-selection {
   background: transparent;
}
::selection { 
   background: transparent; 
}

这篇关于阻止元素参与文本选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！