Tailwind Line Clamp

line-clamp in Tailwind is a utility that limits how many lines of text are visible before truncating the rest with an ellipsis (…). With Tailwind's line-clamp class, you can prevent text from overflowing its container and create a visually appealing design. This is useful for content previews, cards, or UI elements where you want to prevent overflow without manually trimming the content.

How to apply Tailwnd Line Clamp

To apply line clamp to an element's text, you can use the line-clamp-{value} utility class, where {value} represents the desired number of lines to display.

<div class="mx-auto bg-green-200">
	<h1>Hello World</h1>
	<p class="line-clamp-3">
		We have to learn to make health conversations and protect our environment
		from the unhealth way we live. Keep making deep conversations and protecting
		our beautiful world.
	</p>
</div>

Preview

Responsive Line Clamp

Tailwind CSS allows you to apply line clamp classes responsively at different breakpoints. To use responsive line clamp classes, you can append the breakpoint prefix to the utility class. For example, md:line-clamp-2 limits the text to two lines starting from the medium breakpoint and above.

<div class="bg-gray-50 p-6 rounded-t-xl">
	<div class="line-clamp-2 md:line-clamp-3 bg-white p-2 rounded-xl">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor et
		velit aliquam efficitur.Lorem ipsum dolor sit amet, consectetur adipiscing
		elit. Donec nec dolor et velit aliquam efficitur.Lorem ipsum dolor sit amet,
		consectetur adipiscing elit. Donec nec dolor et velit aliquam
		efficitur.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec
		dolor et velit aliquam efficitur.
	</div>
</div>

Preview

In the above example, the text within the <div> element is limited to two lines by default (line-clamp-2), but starting from the medium breakpoint and above, it expands to three lines (md:line-clamp-3). This is useful for allowing more content to be shown on wider screens without overflowing smaller ones.

Note on Browser Support

Please note that the line-clamp utility class relies on the CSS property line-clamp, which is not supported in all browsers. It is supported in modern browsers such as Chrome, Firefox, and Safari, but has limited support in older versions of Internet Explorer and Edge. Make sure to test the line clamp behavior in your target browser environments.

Interaction State Use (hover/focus)

You can’t animate line clamping smoothly, but you can reveal full content on hover by removing clamping:

<p class="line-clamp-2 hover:line-clamp-none transition-all duration-200">
	This is a long paragraph that gets clamped until you hover over it, then it
	expands to show the rest of the text.
</p>

Preview

This works well for cards, tooltips, or expandable elements.

Customization in tailwind.config.js

You can extend the lineClamp plugin to support more values. Make sure the plugin is enabled:

// tailwind.config.js
module.exports = {
	content: ["./src/**/*.{html,js}"],
	theme: {
		extend: {},
	},
	plugins: [require("@tailwindcss/line-clamp")],
};

Then add custom clamps:

extend: {
  lineClamp: {
    7: '7',
    10: '10',
  },
}

Usage:

<p class="line-clamp-10">Clamped to 10 lines</p>

Arbitrary Value Usage

Tailwind allows arbitrary clamp values via bracket notation (if enabled):

<p class="line-clamp-[2]">
	This clamps to 8 lines even if it's not in your config. This is a long
	paragraph that gets clamped until you hover over it, then it expands to show
	the rest of the text.
</p>

Preview

Note: This requires Tailwind’s JIT mode.

Real UI Component Examples

📰 Blog Card Preview

<article class="bg-white p-4 rounded shadow">
	<h2 class="text-lg font-semibold mb-2">Latest News</h2>
	<p class="text-gray-600 text-sm line-clamp-3">
		Elon Musk announces a new initiative focused on sustainable energy. The
		project will span several continents and is aimed at reducing emissions
		worldwide.
	</p>
</article>

Preview

📱 Chat App Message Preview

<div class="p-3 border-b">
	<div class="text-sm font-medium">Alex</div>
	<p class="text-gray-500 text-sm line-clamp-1">
		Hey, just wanted to check in about tomorrow’s meeting…
	</p>
</div>

Preview

🎓 Course Description in a Card

<div class="max-w-sm p-4 border rounded-lg">
	<h3 class="text-base font-bold">Tailwind CSS Mastery</h3>
	<p class="text-sm text-gray-700 line-clamp-4 mt-2">
		This course will help you deeply understand Tailwind’s utility-first
		approach, layout strategies, responsive systems, and best practices for
		component styling in modern frontend development.
	</p>
</div>

Preview

Best Practices for Devs/Designers

Use line-clamp when:

• You want to maintain clean layouts regardless of content length.

• You're building cards, previews, or dashboards with dynamic data.

• Avoid using it for critical content that users must read unless you also provide a way to expand or reveal the full text.

• Combine with hover:line-clamp-none or a “Read more” toggle for accessibility and flexibility.

• Don’t clamp headlines unless you’re confident users understand the truncated context.

Accessibility Notes

• line-clamp is a visual styling feature. Screen readers will still read the entire content unless you hide overflowed content using ARIA (not recommended for most cases).

• If you're hiding overflowed text, make sure it doesn't contain critical information without offering an alternative way to read it (like a modal, tooltip, or link to expand).

Tailwind Line-clamp Class Table

🔍 Want to Learn More?

• Tailwind Letter Spacing

Windframe Tailwind blocks

Landing page