CSS 文本不选择

在网页开发中，我们经常会需要让一些文本内容无法被用户选择或复制。这种效果可以通过 CSS 来实现。

user-select 属性

user-select 属性用于控制用户是否可以选择文本。它有以下几个取值：

• auto：默认值，用户可以选择文本。
• none：用户无法选择文本。
• text：用户只能选择文本，不能选择其他非文本元素。

示例

以下是一个示例，展示了如何使用 user-select 属性来禁止用户选择文本：

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

使用上述代码，可以给任何元素添加一个 unselectable 类，使得该元素内的文本不能被选择。

注意事项

• user-select 属性不是所有浏览器都支持，需要根据需要使用浏览器厂商的前缀。
• 有些浏览器（如 Chrome 和 Safari）可能会忽略 user-select: none;，如果需要兼容这些浏览器，可以将 user-select 属性设置为 text 以允许选择文本，并在元素上添加一个样式来覆盖选择的颜色。