Home / Snippets / How to Multi-Line Truncate Text in Tailwind CSS
How to Multi-Line Truncate Text in Tailwind CSS cover

How to Multi-Line Truncate Text in Tailwind CSS

12.1K

2 years ago

0 comments

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>
notion avatar

Ahmad Aziz

Week-end developer currently experimenting with web, mobile, and all things programming.

Topics:

Frontend

Resource

Average

Average

Support Us

If you like our tutorial, support us by being our Patreon or buy us some coffee ☕️

Post Tutorials

Learn trending tutorials for ReactJs, React Native, VueJS, NextJs, Laravel, Tailwind CSS, and Flutter development.
View Tutorials

Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your web projects
View Components

Welcome to PostSrc V3

PostSrc Dark Logo

You have to login to favorite this