CSS에서 기사 내용 복사를 금지하는 방법-프런트엔드 Q&A-php.cn

CSS에서 기사 내용 복사를 금지하는 방법

青灯夜游

풀어 주다： 2022-08-12 18:22:31

원래의

3545명이 탐색했습니다.

CSS에서는 user-select 속성을 사용하여 기사 내용 복사를 금지하는 효과를 얻을 수 있습니다. 텍스트 요소에 "user-select:none;" 스타일을 추가하기만 하면 됩니다. user-select 속성은 사용자가 텍스트를 선택할 수 있는지 여부를 설정하거나 검색하는 데 사용됩니다. 이 속성의 값이 "none"으로 설정되면 해당 텍스트 요소를 마우스로 선택할 수 없으므로 복사 금지 효과를 얻을 수 있습니다. 텍스트.

CSS에서 기사 내용 복사를 금지하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

일반적으로 웹페이지에서 복사 가능한 텍스트에는 다음과 같은 I 커서가 있습니다I 状光标

CSS에서 기사 내용 복사를 금지하는 방법

如果不想让复制文本，通过设置CSS 的 user-select就可以达到目的。

user-select属性设置或检索是否允许用户选中文本。user-select的默认值是 text，可以选择文本。

在 web 浏览器中，如果您在文本上双击，文本会被选取或高亮显示。此属性用于阻止这种行为。

语法：

user-select: auto|none|text|all;

로그인 후 복사

值	描述
auto	默认。如果浏览器允许，则可以选择文本。
none	防止文本选取。
text	文本可被用户选取。
all	单击选取文本，而不是双击。

只需要给文本元素添加“user-select:none;

텍스트 복사를 원하지 않는 경우 CSS user-select를 설정하여 목적을 달성할 수 있습니다.

사용자 선택 속성은 사용자가 텍스트를 선택할 수 있는지 여부를 설정하거나 검색합니다. user-select의 기본값은 text이며, 텍스트를 선택할 수 있습니다.

웹 브라우저에서 텍스트를 두 번 클릭하면 해당 텍스트가 선택되거나 강조 표시됩니다. 이 속성은 이러한 동작을 방지하는 데 사용됩니다.

CSS에서 기사 내용 복사를 금지하는 방법

구문:

-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属性 */

로그인 후 복사

값	설명
자동	기본값. 브라우저에서 허용하는 경우 텍스트를 선택할 수 있습니다.
없음	텍스트 선택을 방지합니다.
텍스트	텍스트는 사용자가 선택할 수 있습니다.
모두	더블클릭하는 대신 텍스트를 선택하려면 클릭하세요.

텍스트 요소에 "user-select:none;" 스타일을 추가하면 텍스트 요소가 선택되지 않습니다. 마우스. 텍스트 복사 금지 효과를 얻습니다.

사용자 선택 속성은 CSS3 사양의 새로운 기능이므로 호환성 문제가 있으므로 다양한 브라우저에 대해 접두사를 붙여야 합니다.

CSS에서 기사 내용 복사를 금지하는 방법 텍스트 복사 금지 방법:

<!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>

로그인 후 복사

효과(현재 이 화살표 커서):

🎜🎜🎜🎜예: 텍스트 복사 금지 기능 구현을 위해 텍스트 선택 금지🎜🎜rrreee🎜🎜🎜🎜 ( 학습 영상 공유: 🎜css 영상 튜토리얼🎜)🎜

위 내용은 CSS에서 기사 내용 복사를 금지하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!