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.