user-select

user-select

用于控制用户是否可以选择元素中文本的实用工具。

类名样式

select-none

user-select: none;

select-text

user-select: text;

select-all

user-select: all;

select-auto

user-select: auto;

示例

使用 select-none 实用工具来阻止选择元素及其子元素中的文本

尝试选择文本以查看预期行为

The quick brown fox jumps over the lazy dog.

<div class="select-none ...">The quick brown fox jumps over the lazy dog.</div>

使用 select-text 实用工具来允许选择元素及其子元素中的文本

尝试选择文本以查看预期行为

The quick brown fox jumps over the lazy dog.

<div class="select-text ...">The quick brown fox jumps over the lazy dog.</div>

使用 select-all 实用工具来在用户点击时自动选择元素中的所有文本

尝试点击文本以查看预期行为

The quick brown fox jumps over the lazy dog.

<div class="select-all ...">The quick brown fox jumps over the lazy dog.</div>

使用 select-auto 实用工具来使用浏览器默认的文本选择行为

尝试选择文本以查看预期行为

The quick brown fox jumps over the lazy dog.

<div class="select-auto ...">The quick brown fox jumps over the lazy dog.</div>

前缀一个 user-select 实用工具使用断点变体（如 md:）仅在以下情况下应用实用工具中等屏幕尺寸及以上

<div class="select-none md:select-all ...">
  <!-- ... -->
</div>

在变体文档中了解更多关于使用变体的信息。