Tailwind CSS - Line Clamp

Tailwind CSS - Line Clamp

The Line Clamp utility is a powerful tool for truncating text to a specific number of lines, automatically adding an ellipsis (…) at the end. It’s perfect for creating clean, uniform cards, excerpts, and descriptions where content length can vary.

How It Works

As of Tailwind CSS v3.3, the line-clamp functionality is built into the core framework. You no longer need to install the @tailwindcss/line-clamp plugin separately. Simply use the line-clamp-{n} utility classes directly in your HTML.

Available Line Clamp Classes

Tailwind provides classes for clamping from 1 to 6 lines, as well as a utility to remove clamping.

Class	Effect
line-clamp-1	Truncates text to a single line.
line-clamp-2	Truncates text to two lines.
line-clamp-3	Truncates text to three lines.
line-clamp-4	Truncates text to four lines.
line-clamp-5	Truncates text to five lines.
line-clamp-6	Truncates text to six lines.
line-clamp-none	Removes any line clamping, showing all text.

Pro Tip: You can use arbitrary values for more specific needs, e.g., line-clamp-[10].

Practical Examples

Example 1: Truncating Card Descriptions

This example shows a common use case: ensuring that card descriptions in a grid layout have a consistent height by clamping the text.

<!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>

Example 2: Revealing Text on Hover

You can combine line-clamp with state modifiers like hover: to create interactive elements that reveal the full text when a user engages with them.

<!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>

Considerations

• Browser Support: The underlying CSS property (-webkit-line-clamp) is widely supported by all modern browsers, but it’s always good to test on your target browsers.
• Responsiveness: Combine line-clamp utilities with responsive prefixes to change how text truncates on different screen sizes. For example, you might use line-clamp-3 on mobile and line-clamp-none on desktop (md:line-clamp-none).