Inappropriate and unique HTML text

Question

This is my attempt below

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

This works as intended. VISUALLY : JSfiddle However, if you really go in and copy all three divs, "second" is always copied.

I looked at Make line numbers intact . But solving the problem requires the use of a generated CSS counter. In my case, the uncovered part is generated using JS.

Is there a way to create unselectable and non - covered text in html without using javascript or restructuring dom?

Edit

As for why I am doing this, here is my use case: I have dynamically generated content lines that I process gradually. Each line has 2 inline-block divs, the first div contains meta-information, the second div contains useful content. If the user only wants to copy useful content (which is frequent use), then they will also copy the first div. Since these rows are dynamically rendered (I use EmberJS and ember-collection), I cannot use the table view, and I have to have each row autonomously.

Answer 1

::before content will be inappropriate and uncovered.

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

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

Answer 2

Depending on which browsers you need to support, you can simply give them a button on each line that copies useful content to the clipboard.

Here's a nice post: https://stackoverflow.com/a/312960/