交互性
用于控制用户是否可以选择元素中的文本的实用程序。
类 | 样式 |
---|---|
select-none | user-select: none; |
select-text | user-select: text; |
select-all | user-select: all; |
select-auto | user-select: auto; |
使用 select-none
实用程序来防止选择元素及其子元素中的文本
尝试选择文本以查看预期行为
<div class="select-none ...">The quick brown fox jumps over the lazy dog.</div>
使用 select-text
实用程序来允许选择元素及其子元素中的文本
尝试选择文本以查看预期行为
<div class="select-text ...">The quick brown fox jumps over the lazy dog.</div>
使用 select-all
实用程序在用户点击时自动选择元素中的所有文本
尝试点击文本以查看预期行为
<div class="select-all ...">The quick brown fox jumps over the lazy dog.</div>
使用 select-auto
实用程序来使用浏览器默认的文本选择行为
尝试选择文本以查看预期行为
<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>
了解有关在变体文档中使用变体的更多信息。