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>
在 变体文档 中了解更多关于使用变体的信息。