互动性
user-select
用于控制用户是否可以在元素中选择文本的工具。
| 类 | 样式 |
|---|---|
select-none | user-select: none; |
select-text | user-select: text; |
select-all | user-select: all; |
select-auto | user-select: auto; |
示例(Examples)
禁用文本选择(Disabling text selection)
使用 select-none 工具可以防止选择元素及其子元素中的文本：
🌐 Use the select-none utility to prevent selecting text in an element and its children:
尝试选择文本以查看预期的行为
The quick brown fox jumps over the lazy dog.
<div class="select-none ...">The quick brown fox jumps over the lazy dog.</div>允许选择文本(Allowing text selection)
使用 select-text 工具允许在元素及其子元素中选择文本：
🌐 Use the select-text utility to allow selecting text in an element and its children:
尝试选择文本以查看预期的行为
The quick brown fox jumps over the lazy dog.
<div class="select-text ...">The quick brown fox jumps over the lazy dog.</div>一键选择所有文本(Selecting all text in one click)
使用 select-all 工具在用户点击时自动选中元素中的所有文本：
🌐 Use the select-all utility to automatically select all the text in an element when a user clicks:
试着点击文本看看预期的效果
The quick brown fox jumps over the lazy dog.
<div class="select-all ...">The quick brown fox jumps over the lazy dog.</div>使用自动选择行为(Using auto select behavior)
使用 select-auto 工具来使用默认浏览器的文本选择行为：
🌐 Use the select-auto utility to use the default browser behavior for selecting text:
尝试选择文本以查看预期的行为
The quick brown fox jumps over the lazy dog.
<div class="select-auto ...">The quick brown fox jumps over the lazy dog.</div>响应式设计(Responsive design)
在 user-select 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<div class="select-none md:select-all ..."> <!-- ... --></div>请参阅 变体文档 详细了解如何使用变体。