Tailwind CSS - 文字溢位

Tailwind CSS **文字溢位** 是一組預定義的類，用於控制文字在超出元素邊界時的行為，允許截斷、省略號溢位（...）或換行（overflow-wrap）。

Tailwind CSS 文字溢位類

以下是 Tailwind CSS 文字溢位類的列表，其中包含管理文字在超出其容器邊界時的行為的屬性。

類	CSS 屬性
truncate	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
text-ellipsis	text-overflow: ellipsis;
text-clip	text-overflow: clip;

Tailwind CSS 文字溢位類的功能

**truncate:** 當文字溢位其容器時，此類會使用省略號 (...) 截斷文字。
**text-ellipsis:** 當文字溢位其容器時，此類會在文字上應用省略號 (...)。
**text-clip:** 此類會剪下溢位其容器的文字，沒有任何指示（省略號或其他）。

Tailwind CSS 文字溢位類示例

以下是 Tailwind CSS 文字溢位類的示例，展示瞭如何在文字超出其容器邊界時管理文字行為。

防止文字換行並截斷

此示例顯示了當文字超出容器寬度時，truncate 類如何使用省略號 (...) 截斷文字。

示例

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

<body class="p-4">
    <h2 class="text-2xl font-bold mb-4">
        Tailwind CSS Text Overflow
    </h2>
    <p class="underline font-bold">Applied Truncate text</p> 
    <p class="truncate">
        The longest word in English is 
        pneumonoultramicroscopicsilicovolcanoconiosis, a lung 
        disease caused by inhalation of fine silica particles.
    </p>
</body>

</html>

截斷溢位文字

此示例顯示了當文字溢位其容器時，text-ellipsis 類如何顯示省略號 (...)，表明存在比可見內容更多的內容。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
    <h2 class="text-2xl font-bold mb-4">
        Tailwind CSS Text Overflow
    </h2> 
    <p class="underline font-bold">Applied Text Ellipsis</p> 
    <div class="w-64 bg-gray-300 overflow-hidden text-ellipsis">
        The longest word in English is 
        pneumonoultramicroscopicsilicovolcanoconiosis, a lung 
        disease caused by inhalation of fine silica particles.
    </div>
</body>

</html>

在限制處截斷文字

此示例顯示瞭如何在 Tailwind CSS 中使用 text-clip 類來剪下超出其容器邊界的文字，確保內容不會在視覺上溢位指定區域之外。

示例

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

<body class="p-4">
    <h2 class="text-2xl font-bold mb-4">
        Tailwind CSS Text Overflow
    </h2>  
    <p class="underline font-bold">Applied Text Clip</p> 
    <div class="w-64 bg-gray-200 p-4 overflow-hidden">
        <p class="text-clip text-lg">
            The longest word in English is 
            pneumonoultramicroscopicsilicovolcanoconiosis, a lung 
            disease caused by inhalation of fine silica particles.
        </p>
    </div>
</body>

</html>

列印頁面