Home > Article > Web Front-end > How to prohibit copying of article content in css
In CSS, you can use the user-select attribute to achieve the effect of prohibiting copying of article content. Just add the "user-select:none;" style to the text element. The user-select attribute is used to set or retrieve whether the user is allowed to select text. When the value of this attribute is set to "none", the text element cannot be selected by the mouse, thereby preventing copying of text.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
Generally, the copyable text on the web page will have the following I-shaped cursor
If you don’t want to copy the text, set the CSS The user-select can achieve the purpose.
The user-select attribute sets or retrieves whether the user is allowed to select text. The default value of user-select is text, which can select text.
In a web browser, if you double-click on text, the text will be selected or highlighted. This property is used to prevent this behavior.
Syntax:
user-select: auto|none|text|all;
| Value | Description |
|---|---|
| auto | default. Text can be selected if the browser allows it. |
| none | Prevent text selection. |
| text | Text can be selected by the user. |
| all | Click to select text instead of double-clicking. |
You only need to add the "user-select:none;" style to the text element so that the text element cannot be selected by the mouse to prohibit copying. Text effects.
Because the user-select attribute is a new function in the CSS3 specification and has compatibility issues, it must be prefixed for different browsers.
No copying of text is written:
-moz-user-select:none; /* Firefox私有属性 */ -webkit-user-select:none; /* WebKit内核私有属性 */ -ms-user-select:none; /* IE私有属性(IE10及以后) */ -khtml-user-select:none; /* KHTML内核私有属性 */ -o-user-select:none; /* Opera私有属性 */ user-select:none; /* CSS3属性 */
Effect (now this arrow cursor):
Example: prohibit text from being selected, implement the function of prohibiting text copying
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<style>
.test{
padding:10px;
-webkit-user-select:none;
-moz-user-select:none;
-o-user-select:none;
user-select:none;
background:#eee;}
</style>
</head>
<body>
<div onselectstart="return false;" unselectable="on">选择我试试，你会发现怎么也选择不到我，哈哈哈哈</div>
</body>
</html>
(Learning video sharing: css video tutorial)
The above is the detailed content of How to prohibit copying of article content in css. For more information, please follow other related articles on the PHP Chinese website!