Multi line truncate

[viperfx]

What are the way in tailwind to truncate with multiple lines of text?

[estevanmaito]

If you want to truncate just one line: https://tailwindcss.com/docs/word-break/#truncate

For multi line, there's a plugin for it https://github.com/jhta/tailwindcss-truncate-multiline

But it depends on line-clamp, which is an unofficial API https://caniuse.com/#feat=css-line-clamp

Apart from that, there are hacks:

.truncate-2-lines {
  max-height: 3.6em; /* double the size of line-height */
  line-height: 1.8em;
  display: block;
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
}

The only way to do using Tailwind, that I know, would be extending with plugins: adding more max-height and leading utilities, etc...

[simonswiss]

[Update] there is now an official Tailwind CSS plugin for this: https://github.com/tailwindlabs/tailwindcss-line-clamp 🎉

[arifikhsan]

nice to see this natively

[hlmifzi]

thank you very much, its very helped me @estevanmaito

[dotconde]

Thank you @estevanmaito 👏

[mtzrmzia]

currently there is a official tailwind plugin for this
https://github.com/tailwindlabs/tailwindcss-line-clamp