Posts Learn Components new Snippets new Categories Tags About Device Beast sponsor
/

How to Multi-Line Truncate Text in Tailwind CSS

Learn how to truncate and clamp multi-line text in TailwindCSS

Created on Jul 08, 2021

109 views

Truncating text is very common to provide a good visualization of the user interface. By default, TailwindCSS provide a "truncate" class out of the box but it only supports the single-line truncate.
<p class="truncate">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>

In order to perform multi-line truncate you will have to install TailwindCSS line-clamp plugin. The steps are very simple, so let's get started.

1 - Install the Plugin
# Using Yarn
yarn add @tailwindcss/line-clamp

# Using npm
npm install @tailwindcss/line-clamp

2 - Require the Plugin in TailwindCSS Config
// tailwind.config.js

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

3 - Truncate Text
<p class="line-clamp-2">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>

Snippets by

PostSrc poster

PostSrc

Full stack developer mainly focusing on the front end side of the web. The main author of PostSrc and loves writing tutorial and guides online.

new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that are right for your project.

View Components

Other Code Snippets

More