带有 CSS“user-select=none”的元素文本如果位于元素之间，则会被复制答案

【问题标题】：Text of element with CSS "user-select=none" gets copied if it is located between elements带有 CSS“user-select=none”的元素文本如果位于元素之间，则会被复制
【发布时间】：2018-04-25 07:39:43
【问题描述】：

看看这个sn-p：

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>
<p>
  Selectable text.
</p>

现在三次单击第一行然后复制。将其粘贴到任何地方，您将能够看到“不可选择的文本”。也被复制。这只发生在 Chrome 上。有谁知道为什么会发生这种情况以及有什么方法可以解决它？

【问题讨论】：

我在Chrome中试了一下，第二行没有被选中
我可以在 Debian 64 位 KDE 下的 Chromium 57 中重现该问题，但由于它不会在任何地方发生（请参阅 @ammarx 的评论）您使用的是什么版本和系统？
顺便说一句，如果您通过将鼠标从第一行拖动到第三行来选择文本，IE11 也会复制第二行。所以只有 Mozilla 做对了。
我使用的是 chrome 60，它确实发生在我身上，@ammarx，请注意第二行确实没有被选中，但是如果你从第一行复制内容并将其粘贴到你的编辑器上，你会看到两行都被复制了（line1 &line2）。尝试通过三次单击第一行来复制它
Here，据说Chrome 60支持user-select: none;

标签： css google-chrome textselection

【解决方案1】：

如果有人感兴趣，在可选元素之后添加此元素将解决问题：

.copy-blocker
{ position: absolute; user-select: text; height: 100%; }
<div class="copy-blocker"></div>

【讨论】：

+0.5 :o) 我可以确认这可以防止在您单独三次单击第一段时选择和复制第二段。但是，如果您从第 1 行到第 3 行手动选择整个 shebang，它不会阻止第 2 段被选中和复制。

【解决方案2】：

这应该在最新的 chrome 中修复，但以防万一，您可以使用伪元素添加在任何浏览器中绝对无法选择或复制的文本（即代码清单中的行号）。这是将其用于动态内容的技巧：

.line::before {
  content: attr(data-line-number);
  margin-right: 8px;
}

<div><span class="line" data-line-number="1"></span>line 1</div>
<div><span class="line" data-line-number="2"></span>line 2</div>
<div><span class="line" data-line-number="3"></span>line 3</div>

【讨论】：