user-select

user-select

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

Class Styles

select-none

user-select: none;

select-text

user-select: text;

select-all

user-select: all;

select-auto

user-select: auto;

示例

使用 select-none 工具来防止在一个元素及其子元素中选择文本：

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

快速的棕色狐狸跳过懒惰的狗。

<div class="select-none ...">快速的棕色狐狸跳过懒惰的狗。</div>

使用 select-text 工具允许在一个元素及其子元素中选择文本：

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

快速的棕色狐狸跳过懒惰的狗。

<div class="select-text ...">快速的棕色狐狸跳过懒惰的狗。</div>

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

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

快速的棕色狐狸跳过懒惰的狗。

<div class="select-all ...">快速的棕色狐狸跳过懒惰的狗。</div>

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

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

快速的棕色狐狸跳过懒惰的狗。

<div class="select-auto ...">快速的棕色狐狸跳过懒惰的狗。</div>

Prefix an user-select utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.