 There are a lot of times where you might be pulling in snippets of text from somewhere else. Like say you have these preview cards like this, we have, you know, a blog post. You only want a certain amount of text coming in. And by default, maybe it's easy to pull in the first paragraph like we have here. But you don't want them all to be different sizes like that. You want them all to sort of be cut off after, say, maybe three lines. You could use some JavaScript to do that and maybe count characters and just stop it somewhere like that. Or you could just use CSS, say that you only want three lines of total content just like that. And you're done. Hello, my front-end friends. Thank you so much for coming and joining me once again. And if you're new here, my name is Kevin. And here at my channel, I help you fall madly, deeply in love with CSS. And this is a question I get asked about a fair deal, which is how do we limit the total amounts of lines of something and just cut it off after you have three or four lines of text? And so we're going to explore how we can do it in this video. And we're going to jump right into the code that we have here with that example we just saw where we have three lines of text here, four in this paragraph here and five in this paragraph here. And if we look at my HTML, it's just a paragraph inside each one of these cards, card preview text for each one of them. And what we're going to do is we're going to come into our CSS here and we're going to set this up with a dot card preview text to select it preview text. We're going to be using something called line clamp to be able to do this. And in the future, we'll be able to use just this one line and I'll be able to say line clamp three and it will work. This is a part of the spec now. And so it should eventually be supported by browsers. But as it stands now, it is not supported by any browser. But don't worry, there's a way we can get it to work. The first thing we want to do is actually prefix this. We're going to say WebKit like that. And even though this is the WebKit prefix, this prefix works in every browser. So you don't need to have it for the different ones. If you don't know about prefixes, it's basically line clamp was created before it was part of the CSS spec and with the WebKit in front of it. So all the browsers implemented it with this WebKit thing because we're saying it's not an official anything yet. Luckily, it's making its way into the spec. So eventually we can do one line line clamp three. But in the meantime, we need a bit more than just this. The next thing we need to do is actually change the display. And this is interesting because we're doing a WebKit value rather than a WebKit property, which you really don't see too often. And that display, it's a WebKit box, which I've never seen before, but we need to have that on there. And we need one more line here, which is going to be another WebKit. And this one is called a box orient, orient like that. And it's going to be vertical because I guess we're saying it's a WebKit box and that WebKit box has a vertical orientation on it. I was wondering why it wasn't working, but I made a little typo here, WebKit not Wekbit. And now it's sort of working. You can see that it is put in the ellipsis here after the third line, but we have this annoying thing where the text actually keeps going afterwards. So we need one more thing on here, which is an overflow of hidden. And now you actually get it getting cut off with the little ellipsis here at the end showing that there is more text and then we can continue reading. So pretty simple on that front. One important thing with this is you can't control where the word is getting cut off. You can see here, it's only two letters showing up. Here I think it's the entire word and you really have no control over that. So that is something to be aware of. It can cut things off in strange places sometimes. Now another thing that is important here is if I switch this over to say a five, it will cut it off after five lines. If there's five or more, but it won't like add space if there isn't five lines. So you can see this box is still longer than this one, which is longer than that one. So you do wanna cut it off at sort of something that add that consistency because I'm guessing that's what you're after when you do something like this. And if you enjoyed this video and you'd like to see more simple CSS solutions that people often turn to JS to solve, well, I have a video right here for your viewing pleasure. And with that, I would like to thank my enablers of awesome, Jan, Johnny, Michael, Mr. Dave, Patrick, Simon and Tim, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your part of the internet just a little bit more awesome.