1. 交互性
  2. 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>

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

版权所有 © 2025 Tailwind Labs Inc.·商标政策