在HTML5中如何使用CSS建立不可选的文字

1. 介绍

在网页开发中，有时需要将网页中的某些文字设置成不可复制、不可选择的状态。这样可以有效保护网页内容版权和保密性。本文将介绍如何在HTML5中使用CSS建立不可选的文字。

2. 使用user-select属性

使用CSS的user-select属性即可将文字设置成不可选中的状态。该属性可以设置为none、auto和text三个值。

2.1 none

如果将该属性设置为none，则文本将无法被选中或复制。比如下面的代码可以设置整个文档内的文字为不可选中的状态。

body {
  -webkit-user-select: none; /* Chrome, Safari, Opera */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}

2.2 text和auto

如果将该属性设置为text或auto，则文本可以被选择或复制。值为text时可以强制选择文本，而auto则只有在用户选择文本时才能选中。

下面的代码可以将某个元素内的文本设置为不可选的状态：

.not-selectable {
  -webkit-user-select: none; /* Chrome, Safari, Opera */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}

3. 防止右键复制

如果只需要禁止右键复制，可以使用如下样式。

.no-copy {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Chrome/Safari/Opera */
  -khtml-user-select: none; /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
  user-select: none; /* Non-prefixed version */
}

4. 其他技巧

除了使用CSS的user-select属性外，还可以通过其他技巧使文本不可选，如：

4.1 使用JavaScript禁用选择功能

document.onselectstart=function(){return false;}

4.2 使用伪元素

下面的代码可以使选中的文本不被标记。

::selection {background-color: transparent;}
::-moz-selection {background-color: transparent;}

5. 小结

使用CSS的user-select属性可以非常方便地将文本设置成不可选、不可复制的状态。除此之外，还可以使用JavaScript和伪元素等技巧实现相同的效果。需要注意的是，在开发过程中应该权衡保障版权与用户体验，不应过度限制用户行为。