@tailwindcss/line-clamp

What is @tailwindcss/line-clamp?

@tailwindcss/line-clamp is a Tailwind CSS plugin that provides utilities for visually truncating text after a fixed number of lines. This is particularly useful for creating clean and consistent layouts where text content needs to be limited to a certain number of lines.

What are @tailwindcss/line-clamp's main functionalities?

Basic Line Clamping

This feature allows you to truncate text after a specified number of lines. In this example, the text will be truncated after 3 lines.

<div class="line-clamp-3">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

Responsive Line Clamping

This feature allows you to apply different line clamping rules at different breakpoints. In this example, the text will be truncated after 2 lines on small screens, 4 lines on medium screens, and 6 lines on large screens.

<div class="line-clamp-2 md:line-clamp-4 lg:line-clamp-6">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

Other packages similar to @tailwindcss/line-clamp

clamp-js-main

clamp-js-main is a JavaScript library that provides similar functionality for clamping text after a specified number of lines. Unlike @tailwindcss/line-clamp, which is a CSS utility, clamp-js-main is a JavaScript solution that can be used with any CSS framework.

dotdotdot-js

dotdotdot-js is another JavaScript library for truncating text. It offers more customization options compared to @tailwindcss/line-clamp, such as the ability to add custom ellipsis and handle different types of content. However, it requires JavaScript to function, whereas @tailwindcss/line-clamp is purely CSS-based.

README

@tailwindcss/line-clamp

A plugin that provides utilities for visually truncating text after a fixed number of lines.

Installation

Install the plugin from npm:

npm install -D @tailwindcss/line-clamp

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/line-clamp'),
    // ...
  ],
}

Usage

Use the line-clamp-{n} utilities to specify how many lines of text should be visible before truncating:

<p class="line-clamp-3">
  Et molestiae hic earum repellat aliquid est doloribus delectus. Enim illum odio porro ut omnis dolor debitis natus. Voluptas possimus deserunt sit delectus est saepe nihil. Qui voluptate possimus et quia. Eligendi voluptas voluptas dolor cum. Rerum est quos quos id ut molestiae fugit.
</p>

To remove any line-clamping, use line-clamp-none:

<p class="line-clamp-3 md:line-clamp-none">
  Et molestiae hic earum repellat aliquid est doloribus delectus. Enim illum odio porro ut omnis dolor debitis natus. Voluptas possimus deserunt sit delectus est saepe nihil. Qui voluptate possimus et quia. Eligendi voluptas voluptas dolor cum. Rerum est quos quos id ut molestiae fugit.
</p>

Note that the line-clamp-{n} set other properties like display and overflow in addition to -webkit-line-clamp which are not unset by line-clamp-none, so depending on what you are trying to achieve you may need to explicitly override those properties with utilities like flex or overflow-visible as well.

Utilities are for clamping text up to 6 lines are generated by default:

Class	CSS
line-clamp-1	overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
line-clamp-2	overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
line-clamp-3	overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
line-clamp-4	overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
line-clamp-5	overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5;
line-clamp-6	overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;
line-clamp-none	-webkit-line-clamp: unset;

Configuration

You can configure which values and variants are generated by this plugin under the lineClamp key in your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      lineClamp: {
        7: '7',
        8: '8',
        9: '9',
        10: '10',
      }
    }
  },
  variants: {
    lineClamp: ['responsive', 'hover']
  }
}