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