Tailwind CSS - Text Overflow
Tailwind CSS 文本溢出 是一组预定义类，用于控制文本超出元素边界时的行为，例如允许截断、省略号溢出 (...) 或自动换行 (overflow-wrap)。
Tailwind CSS Text Overflow 文本溢出类
以下是 Tailwind CSSText Overflow 文本溢出类的列表，这些类包含一些属性，用于管理文本超出其容器边界时的行为。
| 类 | 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:当文本溢出容器时，该类会使用省略号 (...) 截断文本。
- 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>
