Tailwind CSS Line Clamp

Line Clamp is used to truncate overflowed text to a specific number of lines, followed by an ellipsis (...). This is particularly useful for creating concise content previews or ensuring text doesn't overflow its designated boundaries.

Tailwind CSS simplifies this implementation by providing a wide range of utility-first classes for managing line clamping. Let’s break down everything you need to know about leveraging this feature effectively in your projects.

Overview of Line Clamp

Multi-line Text Truncation

Truncating your text to fit within a limited area improves user experience when handling long content. In Tailwind CSS, the line-clamp utilities allow you to truncate multi-line text with simple configurations.

export default function App() {
  return <h1>Hello world</h1>
}

Removing Line Limitations

Sometimes, you’ll find the need to revert clamping behavior to display full content. Tailwind makes undoing line clamping just as easy. To achieve this, add the line-clamp-none class or apply the utility dynamically using conditional rendering.

export default function App() {
  return <h1>Hello world</h1>
}

States and Responsiveness

Hover and Focus States

Tailwind allows you to conditionally apply the utility class on certain states like hover and focus. Use Tailwind's state modifiers like- hover, focus, etc. to apply the utility only when these states are active, e.g., hover:line-clamp-none.

export default function App() {
  return <h1>Hello world</h1>
}

Breakpoint Modifiers

Tailwind CSS provides breakpoint modifiers to conditionally apply the utility only when the screen hits the defined breakpoint. This is especially helpful for applying effects only on specific screens. Use Tailwind's breakpoint modifiers like- sm, md, etc., to apply the line clamp utilities only on the defined breakpoint and above.

export default function App() {
  return <h1>Hello world</h1>
}

Custom Line Clamp

When the built-in utilities aren’t sufficient for your design requirements, you can define custom line clamp by extending Tailwind’s configuration file.

Extending the Theme

The tailwind.config.js file allows you to add custom line clamp utilities. Once added, these utilities are available globally and can be used as follows:

export default function App() {
  return <h1>Hello world</h1>
}

Using Arbitrary Values

When you want to tweak your project on the go without defining the utilities in the theme file, use Tailwind’s arbitrary values:

export default function App() {
  return <h1>Hello world</h1>
}

Real World Examples

Blog Post Cards

This example shows how to create a grid of blog post previews with line-clamped descriptions. Perfect for content-heavy websites where you need to display multiple blog posts in a clean, uniform layout.

export default function App() {
  return <h1>Hello world</h1>
}

E-commerce Cards

This example demonstrates how to create product cards with clamped descriptions for an e-commerce platform.

export default function App() {
  return <h1>Hello world</h1>
}

News Feed

This example shows a news feed with expandable content using a "Show More" button.

export default function App() {
  return <h1>Hello world</h1>
}

Team Member Directory

This example demonstrates a team member directory with clamped bios.

export default function App() {
  return <h1>Hello world</h1>
}

Recipe Card Gallery

This example shows a gallery of recipe cards with clamped ingredients and instructions.

export default function App() {
  return <h1>Hello world</h1>
}

Customization Examples

Blog Post Card

This example demonstrates a blog post card with a custom line clamp for the excerpt, configured through the theme.

export default function App() {
  return <h1>Hello world</h1>
}

Product Card

This example shows a product card with an expandable description using custom line clamp values.

export default function App() {
  return <h1>Hello world</h1>
}

News Feed

This example implements a news feed with different line clamp values for different screen sizes.

export default function App() {
  return <h1>Hello world</h1>
}

Best Practices

Maintain Design Consistency

Keeping line clamp styles consistent across similar components, such as cards, tooltips, or list items, maintains a polished and predictable design. Inconsistent application may result in some sections appearing visually disconnected from the rest of the interface. To enforce consistency, define a standardized set of line-clamp-* values in your design system and ensure they are applied to components with similar roles.

Complement line clamp with font size, line height and letter spacing utilities to define how truncated text appears. This helps in retaining readability and uniformity, allowing for a more structured presentation of clamped content.

Leverage Utility Combinations

When using Tailwind’s line-clamp-* utilities, pairing it with whitespace-* and break-* utilities can prevent text from breaking unexpectedly. This is particularly useful when handling dynamic or user-generated content where strict clamping is necessary to maintain layout integrity. By controlling how text wraps and breaks, you can ensure a more predictable and visually consistent experience, even when working with varying content lengths.

For instance, using whitespace-nowrap ensures that text remains on a single line before being truncated, while break-words allows long words to break naturally rather than overflowing their container. These utilities, when combined with line clamp, prevent unintended overflow and preserve readability.

Accessibility Considerations

Enhance Readability and Navigability

Readability is a key aspect of accessibility, and applying line-clamp-* should not hinder users from understanding content effectively. Since line clamp cuts the portions of the text, it’s important to ensure that users can access the full content in an intuitive manner. Implementing mechanisms such as tooltips, read-more links, or expanding elements can help users retrieve truncated information when needed.

It’s also helpful to avoid strict line clamp that makes comprehension difficult. Truncating text after just one or two lines may cut off essential details, leading to confusion. Whenever possible, prioritize using line-clamp-* on secondary content rather than crucial instructions.

Focus on High Contrast

Contrast plays a vital role in ensuring that clamped text remains legible for users with visual impairments. When applying line-clamp-*, ensure that the text color stands out against its background. For example, the use of text-gray-900 on light backgrounds or text-white on dark backgrounds ensures sufficient contrast, making clamped text easier to read.

Additionally, avoiding background images or busy patterns behind clamped text prevents readability issues. If using a background image, apply bg-opacity-* or backdrop-brightness-* to maintain sufficient text contrast without compromising visibility. Pairing line-clamp-* with appropriate font weights also enhances readability, making text clearer for all users.