Index

import { adamwathan } from "@/app/blog/authors"; import card from "./card.jpg"; import { YouTubeVideo } from "@/components/media"; import Link from "next/link"; import { CodeExample, CodeBlock } from "@/components/code-example"; import Example from "@/components/example";

export const meta = { title: "Multi-line truncation with @tailwindcss/line-clamp", description: A few weeks back we released @tailwindcss/line-clamp, an official Tailwind CSS plugin for truncating text to a specific number of lines., date: "2021-01-24T20:00:00Z", authors: [adamwathan], image: card, excerpt: ( <> Imagine you're implementing a beautiful design you or someone on your team carefully crafted in Figma. You've nailed all the different layouts at each breakpoint, perfected the whitespace and typography, and the photography you're using is really bringing the design to life.

  It looks totally amazing — until you connect it your actual production content and realize that your beautiful
  grid of blog cards falls apart because, of course, <em>real</em> article excerpts aren't all magically exactly
  three lines long, and now each card is a different height.
  

  

  Sound familiar? If so, the line-clamp plugin is here to save your bacon.
</>

), };

A few weeks back we released @tailwindcss/line-clamp, an official Tailwind CSS plugin for truncating text to a specific number of lines.

Imagine you're implementing a beautiful design you or someone on your team carefully crafted in Figma. You've nailed all the different layouts at each breakpoint, perfected the whitespace and typography, and the photography you're using is really bringing the design to life.

It looks totally amazing — until you connect it your actual production content and realize that your beautiful grid of blog cards falls apart because, of course, real article excerpts aren't all magically exactly three lines long, and now each card is a different height.

Sound familiar? If so, the line-clamp plugin is here to save your bacon.

First, install the plugin and add it to your tailwind.config.js file:

npm install @tailwindcss/line-clamp

module.exports = {
  // ...
  plugins: [
    // ...
    require("@tailwindcss/line-clamp"),
  ],
};

Then all you need to do is add a line-clamp-{n} utility to any block of text to automatically truncate to n lines with a trailing ellipsis:

<p class="line-clamp-3">
  Here's a block of text from a blog post that isn't conveniently three lines long like you designed for originally.
  It's probably like 6 lines on mobile or even on desktop depending on how you have things laid out. Truly a big pain in
  the derriere, and not the sort of thing you expected to be wasting your time trying to deal with at 4:45pm on a Friday
  am I right? You've got tickets to SmackDown and you heard there's gonna be a dark match with that local guy from two
  towns over that your cousin went to high school with before the show starts, and you're gonna miss it if you're not
  there early.
</p>

For more details, check out the documentation over on the GitHub repository.