選択不可能とコピー不可テキスト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 しかし、あなたが実際には「第2」、行くと、すべての3つのdivを貼り付けコピーした場合は、常にコピーされます。

私はMaking line numbers uncopyableを見ました。しかし、それは問題を解決するためにCSS生成カウンタを使用する必要があります。私の場合、コピー不可能な部分はJSを使用して生成されます。

javascriptやdomを再構築することなく、選択不可能なとのコピー不可能なテキストをhtmlで作成する方法はありますか？私はこれをやっている理由として

編集

、ここに私のユースケースである：私は動的に私はインクリメンタルレンダリングコンテンツの行を生成しています。各行に2つのinline-block divsがあり、最初のdivにはメタ情報が含まれ、2番目の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