Tailwind CSS - 行截断

Tailwind CSS - 行数限制

行数限制（Line Clamp）工具类是一个强大的工具，用于将文本截断为特定行数，并在末尾自动添加省略号 (…)。它非常适合创建内容长度可变的整洁、统一的卡片、摘要和描述。

工作原理

截至 Tailwind CSS v3.3，line-clamp 功能已内置到核心框架中。你不再需要单独安装 @tailwindcss/line-clamp 插件。只需直接在 HTML 中使用 line-clamp-{n} 工具类即可。

可用的行数限制类

Tailwind 提供了将文本限制为 1 到 6 行的类，以及一个用于移除行数限制的工具类。

类名	效果
line-clamp-1	将文本截断为一行。
line-clamp-2	将文本截断为两行。
line-clamp-3	将文本截断为三行。
line-clamp-4	将文本截断为四行。
line-clamp-5	将文本截断为五行。
line-clamp-6	将文本截断为六行。
line-clamp-none	移除任何行数限制，显示所有文本。

专业提示：你可以使用任意值来满足更具体的需求，例如 line-clamp-[10]。

实际示例

示例 1：截断卡片描述

此示例展示了一个常见用例：通过限制文本行数，确保网格布局中的卡片描述具有一致的高度。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Line Clamp Example</title>
</head>
<body class="bg-slate-100 p-8">
  <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden">
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case Study</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding the right framework for our new project</a>

      <p class="mt-2 text-slate-500 line-clamp-3">
        Finding the perfect framework can be challenging. We needed something that offered rapid development, high performance, and a great developer experience. After evaluating several options, we landed on a utility-first approach. This allowed us to build custom designs without leaving our HTML, dramatically speeding up our workflow and reducing the amount of custom CSS we had to write and maintain. The result was a more consistent and maintainable codebase.
      </p>
    </div>
  </div>
</body>
</html>

示例 2：悬停时显示全部文本

你可以将 line-clamp 与 hover: 等状态修饰符（state modifiers）结合使用，创建交互式元素，当用户与其互动时显示全部文本。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Interactive Line Clamp</title>
</head>
<body class="bg-gray-100 p-8">
  <div class="max-w-md mx-auto bg-white p-6 rounded-lg shadow-lg">
    <h3 class="font-bold text-xl mb-2">Article Excerpt</h3>
    <p class="text-gray-600 line-clamp-2 hover:line-clamp-none transition-all duration-300 ease-in-out">
      This is a long piece of text that is initially clamped to two lines to save space in the user interface. It provides a concise summary for the user. However, if the user is interested and hovers their mouse over this paragraph, the `line-clamp-none` utility will be applied, smoothly revealing the full content of the text. This is a great user experience pattern for previews.
    </p>
  </div>
</body>
</html>

注意事项

浏览器支持：底层的 CSS 属性（-webkit-line-clamp）得到了所有现代浏览器的广泛支持，但最好还是在你的目标浏览器上进行测试。
响应式设计：将 line-clamp 工具类与响应式前缀结合使用，以改变文本在不同屏幕尺寸下的截断方式。例如，你可以在移动设备上使用 line-clamp-3，而在桌面设备上使用 line-clamp-none (md:line-clamp-none)。