Tailwind Utility Classes line-clamp-* Not Working in Elements — Possible to Add Support?

Elements
1

I’m currently experimenting with a few Tailwind CSS utility classes to improve how content is styled on my websites.

Right now I’m using classes like:

  • text-balance
  • text-pretty
  • truncate
  • line-clamp-3

While testing this, I noticed that the Tailwind utility class line-clamp-3 doesn’t work in Elements , whereas truncate works exactly as expected .

@dan or @ben — would it be possible to add support for the Tailwind utility classes line-clamp-* in Elements?

As a workaround, using custom CSS works:

.clamp-3{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

However, this solution isn’t very elegant and it removes the ability to easily use different line clamps for different breakpoints, which Tailwind normally handles quite well.

PS: Maybe it would also be possible to add text-balance and text-pretty directly to the Elements text component as well.

2

Hi,

I think that line-clamp-* works in Elements but only in typography components, not in text components.

3

Interesting — that’s actually good to know. In that case, it should be fairly easy to make it available for the text component as well.