Menu
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.
556
Use user-select CSS property with the HTML tag on those you want to disable the text selection of. You can target those HTML elements using a class or ID. In the below example, text selection is disabled for the 2nd div tag. Here, class is used to target the 2nd div.
You can allow text selection, but prevent copy and cut functions using the oncopy, oncut and onpaste event attributes. By adding these attributes into a textbox's <input> tag, you can disable cut, copy and paste features. The user is left with the option to enter the field manually with these attributes set.
You can use the user-select property to disable text selection of an element. In web browsers, if you double-click on some text it will be selected/highlighted. This property can be used to prevent this.
If you want to limit the text length to one line, you can clip the line, display an ellipsis or a custom string. All these can be done with the CSS text-overflow property, which determines how the overflowed content must be signalled to the user.
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.
83
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
