user-select

用於控制使用者是否可以選取元素中文字的通用類別。

Class Styles

select-none

user-select: none;

select-text

user-select: text;

select-all

user-select: all;

select-auto

user-select: auto;

範例（Examples）

使用 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>

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