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>

打印页面