用户选择

用户选择

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

Class Styles

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 ...">快速的棕色狐狸跳过懒惰的狗。</div>

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

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

The quick brown fox jumps over the lazy dog.

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

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

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

The quick brown fox jumps over the lazy dog.

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

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

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

The quick brown fox jumps over the lazy dog.

<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.