6

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.

user2335065
  • 2,337
  • 3
  • 31
  • 54
  • 1
    The code seems to work well for me. I tried to replicate your scenario and i am not able to select the unselectable text. – VSri58 Nov 19 '14 at 02:44
  • Could you provide your browser details or may be attach a screenshot of your issue with the text selected? – VSri58 Nov 19 '14 at 02:45
  • Actually I mean copying the text, not text selection. Not sure why I wrote this.. You can see on http://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. – user2335065 Nov 19 '14 at 02:52
  • 4
    [Duplicate Stackoverflow Question](http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting) – Billy Nov 19 '14 at 02:58

2 Answers2

3

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.

Sudhir Kaushik
  • 173
  • 9
0

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

Community
  • 1
  • 1
boobie
  • 96
  • 2
  • 12