Javascript 不可选择和不可压缩的文本HTML

下面是我的尝试

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

/*css*/
.不可高亮显示的文本{
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
/*html*/
第一
第二
第三

这在视觉上达到了预期效果： 然而，如果你真的去复制粘贴所有三个div，“second”总是被复制

我看了看。但它需要使用CSS生成的计数器来解决这个问题。在我的例子中，不可压缩部分是使用JS生成的

有没有一种方法可以在html中创建不可选择的和不可压缩的文本，而无需使用javascript或重构dom

编辑

---

至于我为什么要这样做，下面是我的用例：我已经动态生成了增量呈现的内容行。每行有2个

内联块

div，第一个div包含元信息，第二个div包含有用的内容。如果用户只想复制有用的内容（这是一个常见的用例），那么他们最终也会复制第一个div。由于这些行是动态呈现的（我使用的是EmberJS和ember collection），因此我无法使用表视图，并且必须使每一行都是自包含的。

：：在

之前，内容将是不可选择和不可压缩的

[数据内容]：：之前{
内容：attr（数据内容）；
}

首先
第三

根据您必须支持的浏览器，您只需在每行为它们提供一个按钮，将有用的内容复制到剪贴板

---

这里有一个很好的帖子：

此时需要问的重要问题是：你为什么要这样做？@CBroe用use更新了这个问题-case@zzzzBov用用例更新了问题OK，很公平…也许你可以尝试实现一个“复制模式”，通过点击按钮或复选框，每行的第一列通过

display:none

隐藏…？我认为有几个类似pastebin的网站使用了这种技术，允许复制代码段（有行号或无行号）。@CBroe，哎呀，我刚刚意识到我的评论是针对你的，而不是针对OP。现在修复有点晚了。你说点击选择很烦人，这是对的。在聚焦时切换，并允许用户在初始聚焦后更改选择，这一点非常重要。