Posts Learn Snippets Categories Tags About
/

How to Multi-Line Truncate Text in TailwindCSS

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

Created on Jul 08, 2021

4 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>

Created 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.