Interactivity
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 工具类来阻止选择元素及其子元素中的文本：
尝试选择文本以查看预期行为
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>响应式设计
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.
