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

【问题标题】：Unselectable and uncopyable text HTML不可选择和不可复制的文本 HTML
【发布时间】：2016-04-13 04:53:09
【问题描述】：

这是我下面的尝试，

/* 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 生成的计数器来解决问题。就我而言，不可复制部分是使用 JS 生成的。

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

编辑

至于我这样做的原因，这是我的用例：我已经动态生成了逐行渲染的内容。每行有 2 个inline-block div，第一个 div 包含元信息，第二个 div 包含有用的内容。如果用户只想复制有用的内容（这是一个常见的用例），那么他们最终也会复制第一个 div。由于这些行是动态呈现的（我使用的是 EmberJS 和 ember-collection），因此我不能使用表格视图，并且不得不让每一行都是独立的。

【问题讨论】：

此时重要的问题是：你为什么要这样做？
@CBroe 用用例更新了问题
@zzzzBov 用用例更新问题
好吧，很公平……也许你可以尝试实现一个“复制模式”，通过点击按钮或复选框，每行的第一列通过display:none隐藏……？我认为有几个类似 pastebin 的网站使用这种技术，以允许复制带有或不带有行号的代码 sn-ps。
@CBroe，哎呀，我才意识到我的评论是针对你而不是 OP。现在修复有点晚了。你是对的，点击时的选择很烦人。在聚焦时切换并允许用户在初始聚焦后更改选择非常重要。

标签： javascript html css

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

根据您必须支持的浏览器，您只需在每一行上给他们一个按钮，即可将有用的内容复制到他们的剪贴板。

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

【讨论】：