user-select

user-select

用於控制使用者是否可以選取元素中文本的工具。

Class 樣式

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>

前綴an user-select 工具具有類似 md: 的中斷點變體，僅在medium 螢幕尺寸及以上套用該工具

<div class="select-none md:select-all ...">  <!-- ... --></div>

在變體文件中了解更多關於使用變體的信息。