Question

这是我在下面的尝试，

/* css */
.unhighlightable-text {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* html */
<div> first </div>
<div class='unhighlightable-text'> second </div> 
<div> third </div>

这可以按预期运行：JSfiddle 但是，如果你真的去复制粘贴所有三个div，'second'总是被复制。

我看了Making line numbers uncopyable。但它需要使用CSS生成的计数器来解决问题。在我的例子中，uncopyable部分是使用JS生成的。

有没有办法在不使用javascript或重组dom的情况下在html中创建不可选择的和不可复制文本？

修改

至于为什么我这样做，这是我的用例：我有动态生成的内容行，我逐步呈现。每行有2个inline-block div，第一个div包含元信息，第二个div包含有用的内容。如果用户只想复制有用的内容（这是一个常用的用例），那么他们最终也会复制第一个div。由于这些行是动态呈现的（我使用的是EmberJS和ember-collection），因此我无法使用表视图，并且强制每行都是自包含的。

Answer 1

::before内容将无法选择且无法复制。

[data-content]::before {
  content: attr(data-content); 
}

<div> first </div>
<div data-content='second'></div>
<div> third </div>

Answer 2

根据您必须支持的浏览器，您可以在每行上为其提供一个按钮，将有用内容复制到剪贴板。

这是一篇很好的帖子：https://stackoverflow.com/a/30810322/1159067

不可选择和不可复制的文本HTML

2 个答案: