make html text unselectable
html
Solution
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.
Problem
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