How to set a maximum number of lines of text with CSS

Limiting the total visible lines of text within an element is something I get asked about pretty frequently, and while there are probably some complex JavaScript solutions, there is a simple, though slightly strange, way to do it with CSS only.

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[janetrajkoski]

I sometimes think that YouTube and Kevin have some sort of a conspiracy in which they hear my problems and a day after that Kevin comes out with a video solving that same problem with CSS. Literally happened in the last two videos, in which i took the JS approach to solve them. If I only knew... (researched more...)

[sugacoma]

I've learned more from you in the last two weeks of viewing than the last 2 years of tinkering with existing CSS, thank you

[MentorMode]

Amazing content. For the record, display: -webkit-box; is actually display: flex; as well as -webkit-box-orient: vertical: is flex-direction: column;

[nerdydragon]

This is legit what I was wanting on a community post forum design I'm working on for our Blazor redesign! Thanks a ton!

[ZackPyle]

I use this a lot. To get around the height thing at the end, I often just give that element a fixed height since I'm already clamping it to 3 lines (meaning I know the height)

[necatbolpaca]

You can wrap the clamped content with a div has a "flex-grow:1;" property for shorter content. The div grows and pushes the button to bottom, so the buttons will be aligned. (For line-clamp: 5 situation.)

[Mane]

Damn this is sooo useful! Loving these shorter, one quick topic videos, keep em coming!

[uridevmedia]

This is powerful, you've not only made me love CSS, but I've gotten better watching your videos

[SebastianZartner]

Can't wait to get the standardized version of this! The prefixed solution is pretty hacky and has several issues besides clamping everywhere. At least all browsers already support the prefixed solution for quite some time, so browser support for that is really good.

[Turabbo]

Edit: Just did a bit of digging and it sounds like the news on an official line-clamp is pretty bad? A proposed addition way back in 2018, and no signal from any browsers for future support... ☹️

---

Honestly this is probably my biggest personal niggle with the current state of CSS haha. I use line clamping all the time in my designs, and I clicked your video to see whether there was any good news.

Over the moon to hear a single property is in the spec!! I can't wait!

I have a sass mixin to handle this for other devs in my framework, but there's still so much jank with it. Like the block padding overflow issue, and the fact that -webkit-box behaves almost-but-not-quite like flex.

Can't wait for a proper implementation!!

[anonymous-tgsh]

I have used this in the past, copied from stack overflow, but had no clue how it worked 😅.thanks for explaining.👏

[isancreativedesigns]

Oh you beauty! I had been using another method but it suddenly failed so I was doing some practice with your 4 card tutorial yesterday (The hour 11 mins one) and thought I'd try again Thank you!

[mimmobordini]

I love you. I stopped using Bootstrap etc since 2021 thanks to your videos, now everything I do is with pure CSS <3

[MrKOHKyPEHT]

Really really really and extremely useful video. Few days ago faced that problem at work and investigation took around 1 hour. Thx for video. In favorites to not lose it.

[Happyendrew]

Thank you, my dear friend! Your help is always appreciated. Wishing you all the best!

[deniskotov]

The typo was nice. Whackbit - sounds great.

[jaidhingra]

Amazing! I was looking for the solution to this problem from last year, but found it now.

Thank You!

[samahgad]

Realy i am deeply in love with css and mostly with the way you teach us😍

[LePhenixGD]

Amazing stuff! Was really wondering if you could create a multi-line ellipsis and your video came out in the right moment!

[bobdinitto]

Thanks Kevin I've often wondered how to do this.