Question

查看此代码段：

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

现在三击第一行然后复制。将其粘贴到任何地方，您就可以看到＆＃34;不可选择的文字。＆＃34;也被复制了。这仅在Chrome上发生。有谁知道为什么会发生这种情况以及有哪些方法可以解决这个问题？

Answer 1

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

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

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

CSS元素的文本＆＃34; user-select = none＆＃34;如果它位于元素之间，则会被复制

2 个答案: