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

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 生成的计数器来解决问题。在我的例子中，不可复制的部分是使用 JS 生成的。

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

编辑

至于我为什么这样做，这是我的用例:我动态生成了我递增呈现的内容行。每行有 2 个 inline-block div，第一个 div 包含元信息，第二个 div 包含有用的内容。如果用户只想复制有用的内容(这是一个常见的用例)，那么他们最终也会复制第一个 div。由于这些行是动态呈现的(我使用的是 EmberJS 和 ember-collection)，我不能使用 TableView 并且被迫让每一行都是独立的。

Answer 1

::before 内容将不可选择且不可复制。

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

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