禁用文本选择 - CSS

有时候我们需要禁用网页上的文字选择功能，以保护页面中的敏感信息或防止用户随意复制内容。CSS 提供了几种简单的方法，可以方便地禁用文本选择功能。

user-select 属性

user-select 属性可以用来控制元素内部文本是否允许被选择。该属性可以设置为以下几个值之一：

• auto：默认值，允许文本被选择。
• none：禁用文本选择。
• text：只允许文本被选择。

/* 禁用整个页面的文本选择 */
body {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none;
}

/* 只禁用某个元素内部的文本选择 */
.example {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none;
}

-webkit-touch-callout 属性

-webkit-touch-callout 属性可以控制某个元素长按时的弹出菜单是否显示。当该属性值为 none 时，长按不会弹出菜单，也就无法选择文本。

/* 禁用长按菜单和文本选择 */
.example {
  -webkit-touch-callout: none; /* Safari */
}

优缺点

禁用文本选择的目的虽然是保护页面内容，但其对于网站的使用体验可能产生一些负面影响。因此，我们需要在使用时权衡其优缺点。以下是一些值得注意的事项：

优点

• 保护页面内容，防止被不良用户盗用。
• 使页面布局更加严谨，避免因为用户选择的文本导致页面样式出现变化。

缺点

• 阻碍用户复制粘贴文本的正常操作。
• 阻碍搜索引擎对页面内容的索引，影响网站SEO优化。
• 禁用文本选择可能被视为一种不友好的设计，降低用户体验。

因此，在使用禁用文本选择的 CSS 技巧时，需要权衡其优缺点，并仔细考虑是否符合设计要求。