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>
Leave a reply