css - 如果 CSS 为 "user-select=none"的元素文本位于元素之间，则会被复制

Question

看看这个片段:

.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 上。有谁知道为什么会发生这种情况以及有什么方法可以解决它？

Answer 1

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

.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>