Tailwind CSS - 使用者選擇

Tailwind CSS **使用者選擇** 是一個預定義類集合，用於管理使用者如何在網頁上選擇文字，允許您指定是否可以選擇文字。

Tailwind CSS 使用者選擇類

以下是控制文字選擇行為的 Tailwind CSS 使用者選擇類的列表。

類	CSS 屬性
select-none	user-select: none;
select-text	user-select: text;
select-all	user-select: all;
select-auto	user-select: auto;

Tailwind CSS 使用者選擇類的功能

**select-none:** 此類阻止使用者選擇元素內的任何文字。
**select-text:** 此類允許使用者選擇和複製元素內的文字。
**select-all:** 此類允許使用者一次選擇元素內的所有文字。
**select-auto:** 此類允許瀏覽器根據其預設行為處理文字選擇。

Tailwind CSS 使用者選擇類示例

以下是 Tailwind CSS 使用者選擇類的示例，展示瞭如何將不同的文字選擇行為應用於網頁上的元素。

Tailwind CSS 管理文字選擇

此示例展示瞭如何使用 Tailwind CSS 使用者選擇類控制文字選擇。**select-none** 類使文字不可選擇，而 **select-text** 允許使用者選擇文字。

示例

  
<!DOCTYPE html>
<html lang="en">
<head>  
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-6">
        Tailwind CSS User Select
    </h1>
    <h3 class="underline font-bold mb-2">
        select-none
    </h3>
    <div class="select-none bg-pink-200 p-2 mb-4">
        This text cannot be selected by the user.
    </div>
    <h3 class="underline font-bold mb-2">
        select-text
    </h3>
    <div class="select-text bg-blue-200 p-2">
        Text is selectable. Try selecting it with your mouse
    </div>
</body>

</html>

Tailwind CSS 全選和自動選擇類

此示例展示瞭如何使用 Tailwind CSS 使用者選擇類進行文字選擇。**select-all** 類在選擇任何部分時突出顯示所有文字，而 **select-auto** 類遵循瀏覽器的預設文字選擇行為。

示例

<!DOCTYPE html>
<html lang="en">
<head>  
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-6">
        Tailwind CSS User Select
    </h1>
    <h3 class="underline font-bold mb-2">
        select-all
    </h3>
    <div class="select-all bg-green-200 p-4 mb-4">
        Selecting any part highlights the entire text.
    </div> 
    <h3 class="underline font-bold mb-2">
        select-auto
    </h3>
    <div class="select-auto bg-yellow-200 p-4">
        This text follows the browser's default selection.
    </div>
</body>

</html>

列印頁面