[Feature proposal] Add -webkit-box display type

[hipstermojo]

I use display: -webkit-box when doing text clamping and I can't hide that HTML element using none from Tailwind. I think it would be cool if -webkit-box could be in Tailwind so I wouldn't need this. However, -webkit-box is not supported in IE so I don't know if you might interested in adding it.

[royvanv]

That's the old flexbox spec, right? Can't you just use .flex instead?

[simonswiss]

Hey @hipstermojo 👋

This plugin that provides text clamping uitlitie susing -webkit-box might be interesting to you: https://www.npmjs.com/package/@neojp/tailwindcss-line-clamp-utilities

[hipstermojo]

This certainly looks like it addresses what I need. Is there a reason why this is not in the core library?

[adamwathan]

@hipstermojo Biggest reason is just only have a limited amount of resources. If I work on adding line clamp support then I'm not working on something else, like dark mode or animation or gradients or whatever. New features take a lot of time because getting the API right is very hard.

I'd like to add line-clamp eventually but until I am able to prioritize it above other projects it's best to use a plugin.

[hipstermojo]

Fair enough. I guess I'll work with what's available. I guess this issue can be closed then?

[simonswiss]

This has been moved to a discussion - so these are not effectively closed. It might become a useful response to point to when other folks have similar questions on other features 👍

[pjchender]

For those who come across this issue, note that Tailwind has already implemented the line-clamp class with built-in -webkit-xxx. If you need the line-clamp feature, please refer to the Tailwind documentation on Line Clamp.

[Krak86]

Thank you man!

[PatelUtkarsh]

If you're hiding an element and showing it with a line clamp, it doesn't work with the following:

<p class="hidde sm:block line-clamp-3"></p> 

But since line-clamp already has display:-webkit-box, You can get away with the following:

<p class="hidde sm:line-clamp-3"></p>