How to prevent user copying text of a certain div using CSS?

Question

I know one can use the below CSS to disable user text selection.

   .unselectable{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }

But when I have the following html:

<p>selectable text 1</p>
<p class="unselectable">unselectable text</p>
<p>selectable text 2</p>

Users can still copy the unselectable text by selecting from the very top of the page (selectable text 1) to the very bottom of the page (selectable text 2). Any ways to prevent that? Thanks.

Cur

The code seems to work well for me. I tried to replicate your scenario and i am not able to select the unselectable text. – Monogenetic

Could you provide your browser details or may be attach a screenshot of your issue with the text selected? – Monogenetic

Actually I mean copying the text, not text selection. Not sure why I wrote this.. You can see on jsfiddle.net/gtb74zqj . When I select the whole result area and press Ctrl + C, I can copy all the three lines of the text. I am using Chrome on Windows Vista. – Cur

Duplicate Stackoverflow Question – Lakitalaks

Answer 1

Questions seems vague.

There is a difference between "Selection" and "Copying" on HTML pages.You can prevent "Selection" using CSS, but you can not prevent "Copying" using CSS. You need JS for that.

Lydia

Check this for disabling text copy #737522 – Lydia

Answer 2

You just give it a div wrapper and define the id selector to do what you want Correct way to do a css wrapper

Disrepute