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.

<!-- [!code classes:select-none] -->
<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.

<!-- [!code classes:select-text] -->
<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.

<!-- [!code classes:select-all] -->
<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.

<!-- [!code classes:select-auto] -->
<div class="select-auto ...">The quick brown fox jumps over the lazy dog.</div>

响应式设计

使用 md: 等断点变体为 user-select 工具类添加前缀，使其仅在中等及以上屏幕尺寸生效：

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

在 变体文档 中了解如何使用变体。