Question

First, I have been here How to make HTML Text unselectable
But that doesn’t solve my issue, (the JavaScript version works well, but I need to make it using HTML and CSS, I cannot use JavaScript) I used the recommended CSS, but look at my DEMO drag the mouse from [drag from here] to [to here] you will see that the text is still selectable.
any way to make it really unselectable?

Thanks

Answer 1

After reviewing this problem, Came to mind another method to prevent the user from selecting text while viewing the page, basically, setting up a mask over the target text:

Your Fiddle updated here!

Example:

---

CSS

.wrapTxt {
  position: relative;
}
.wrapTxt .mask {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

HTML

<p class="wrapTxt">
  This is my text! My text is mine and no one Else's!
  <span class="mask"></span>
</p>

The principle here is simple (Fiddle), have a block element over the text, occupying all of it’s wrapper space.

The downfall is a hard implementation if you need one line to be selectable and the next one not. Also, links on the “not selectable” text will not me available.

Final note:

The user can always go around this, either by looking at the source code, or by dragging the mouse from top to bottom of the webpage.