How To Limit Lines Of Text With CSS Only

if you've ever tried to show only three lines of text in a box you know how difficult that is if not impossible to do in CSS but in today's video I'm going to show you not only how to do that in two different ways but also how you can create Dynamic expand and collapse buttons all with just CSS and no JavaScript at all [Music] welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner as you can see here we have these Dynamic expand collapse buttons and we have the ability to limit text based on how many lines we want to have shown for example three lines for whatever it is and all this is using just CSS and HTML no JavaScript at all I'm going to show you multiple ways to do this text limiting as well as this expand collapse button now to get started this is the demo that we're working with we just have these really simple cards showing up and generally when you have cards like this you kind of want them to be the same height like we have over here in the final version of this you want them to be about the same height so we're going to limit the text to a set number of lines but normally doing that in CSS is very difficult now recently I ran across the video by Kevin Powell where he showed a technique on how to actually do this where you limit something to a set number of lines and it's really cool and I'm going to show you how to do that and then I'm going to show you the way that I would normally do this the way I've always done it in the past and then we're going to jump into those expand collapse buttons the first thing we need to do is we need to give a class to our P tags let me just get a cursor here for each one of our P tags and we're going to say here class is going to be cut off X we're going to cut off the text at a certain number of characters then in our style sheet all we have is really basic styles that have these cards showing up on our screen so nothing too crazy here now we can move into this cut off text section now the first thing that I want to do is I want to create a CSS variable that is going to be for the max number of lines that we want to show I'll just set that to three this just makes it so we can actually modify this in the HTML and set any number of lines we want then the next thing I need to do is we need to set a couple different properties in order to determine how to make this show up and the way that this is going to work is the way that Kevin did it in his video which again I'll have Linked In the cards for you the first thing that we need to do is we need to just set the display here to webkit box now this is all going to be using webkit properties which is normally things like the Chrome browser and Edge those are web based browsers but these properties are so popular that all the major browsers have implemented them so they have support pretty much everywhere except for like Internet Explorer now the next thing we need to do is we need to set a web kit line clamp so webkit line and clamp just like this and this is where we need to set it to the number of lines we want like three or four in our case we have a variable called Max lines so we're going to set that to three now if I give this a quick save you'll notice so far nothing at all has happened that's because we need to do a few other things first of all we need to set an overflow here to Hidden so we're going to set overflow to Hidden and that's almost there the very last thing we need to do is we need to set our web kit box we need to set the Orient so we can come down here to orient and we want to set this to Vertical saying it's a vertical box as soon as we save you'll now see that everything is limited to three lines if I change this here to like five now everything's limited to five lines or two lines and so on as you can see at whatever point where we have the cutoff you can just see it puts three dots at the very end that little Ellipsis and then it cuts off all the rest of the text now if we for example did not have over full hidden you can see all the extra text is showing up and if we were missing any of these different properties nothing's going to work so it's a little bit finicky to get this situation to work but the nice thing is is it works really easily it's just a couple properties you need to Define and you automatically get this as ellipses at the end what happens if you want to do even more than just limit the text like this maybe you want to do a display property that's not webkit box like you want to use flexbox for example well you can't do that with this situation so I'm going to show you a technique that allows you to do this the exact same way it's going to have the exact same result but the biggest difference is you have tons of flexibility since you're setting the height yourself and you can actually use any different display Properties or whatever else that you want out there so what we need to do is we're just going to get rid of all the code that we currently have for this let's just remove it and we're going to add back in that overflow of hidden just because we want that overflow hidden because we're going to be limiting our height now also I'm going to set in a variable here for our line height that's just because oftentimes you have a different line height than just the standard one for example 1.4 and we need to take that into account when we determine our height this is essentially the height of a line of text is just our line height times the actual font size that's how we get the height of our box what we can do is we need to do a simple calculation to get our height we can just say calc here our calculation is going to be a variable which is our Max lines we can get our Max lines we can multiply that by one em and that's essentially our font size so we're just taking our font size multiplying it by the number of lines we want so we're saying we have five lines of font right here is what this is saying because this variable is five this is one em then we just need to multiply that by our line height to make sure we take into account how tall our different lines are if we do that immediately you can see all of these boxes are now limited to exactly five lines of text but actually they're limited to six lines of text the reason for that is we're not applying our line height so let's just make sure we apply our line height just like that and now if we save you can see we're perfectly limited to five lines of text and is taken into account that extra line height now we could probably make this a Max height and the reason for that is if we for example set this to like 15 lines not all of these have 15 lines of text as you can see article 3 has less than 15 lines so it doesn't fill that full height if we have this set to height for example they would all be that same height so I generally prefer to use max height in this scenario now another thing that I like to do is I like to have a little like fade effect as you can see we have that fade effect on all of these other ones down here I like to have that little fade effect so it's really easy to do we can just come in here set our position to relative and then we can just style a cutoff text before element that we can make have that fade effect for us but essentially all this code right here minus this position relative this is all you need to specifically size something to any height using any line height and one thing that is going to happen eventually in CSS is CSS is going to have a new unit called the LH unit just like this and that essentially is the same as whatever your line height is currently it's not available in any browser when I save you can see this doesn't actually work but when that becomes a thing you can just use that instead of this line height hack that we're using here let's set this back to like three lines for example and now let's create that fade effect before our fade effect we just want to have essentially a blank piece of content we want to position it absolutely and it's going to be absolutely positioned inside of our text there we go because we have position relative on our text next we need to have our height here and the height is going to be rather straightforward I just want it to be one line tall so we're going to use a calculation here which is 1 em times our line height and that's going to give us exactly one line worth of height for this then I can change the width to 100 the bottom to zero so it shows up on the very bottom and then what we can come inside here is we can say pointer events none that just means that it's not selectable at all which is really useful and then we can do our background our background we're going to do a linear gradient I want it to be a linear gradient that goes to the bottom so at the start at the top it's going to be transparent and then it's going to change to White if you do that we can see that we now have that slight fade effect if I want it to be taller like two lines tall you can see I change it to two lines and now the fade starts around line two but since it's doing that transparent transition you can see it's mostly showing up only on the bottom portion and you notice I can highlight my text that's because I have pointer events none if I remove that I now can't select the things behind there so that's why we have that pointer events right there I kind of like it to be a one line effect so it's really subtle but you know it's each yarn preference the nice thing about this technique is you can change this however you want for example if we want our text here to be a display of flex that's perfectly fine you can see nothing at all breaks well with the old Technique we couldn't do that so this is why I really like this technique it's a little bit more set up because you need to know how much how much your line height is but other than that it works exactly the same it gives you the same result but with a little bit more flexibility now the final thing I want to show you how to do which is really cool is these Dynamic expand and collapse buttons and these again require no JavaScript at all so in order to do that we need to go to our HTML and you may think that what we need to do is we need to add a button but instead of adding a button we're going to be adding an input with the type of check box and the reason for that is we can actually check to see if our checkbox is checked or not and that can be our expand or collapse State let's just put our type of checkbox in here let's give this a class we're going to call it expand button and we're just going to copy that down into the bottom of each one of our different articles so as you can see we now have a checkbox inside of each one of our different articles that doesn't have a label or anything that's perfectly okay now we need to do on top of that is we need to style this button so let's do our expand button and the first thing I want to do is say appearance none what that's going to do is just going to remove the checkbox as you can see the checkbox has disappeared it essentially hides it which is perfect that's exactly what we want to do because we want to create our own custom button looking element instead so I'm just going to real quick do some rough Styles it doesn't have to be beautiful you can make this look however you want but we're going to say we're going to have a one pixel solid black border we're going to have padding which is 0.5 em in Border radius I 25 em our cursor is going to be pointer and I'm also going to put a little margin on the top just so we have some spacing so we'll do like one ram there we go now we have essentially it still looks like a checkbox but when we click on it you know it doesn't have any check state or anything because it's just a solid border and that's all it is right now also I want to add in essentially a hover effect so we're going to come in here with a hover change our background color to be CCC now when we hover over this you can see it just darkens it a little bit that looks really good now the next step is going to be adding in the text that we want to have and that's actually really easy we can just do the before element for example I can change my content here to say expand and now when I say if you can see all of these say expand inside and that's exactly what we want what we can also do is we can say that if any of these are checked then we can change this to collapse instead of expand so now if I click on any of these you can see when I toggle them right now they're unchecked so they say expand when I click on it it says collapse because it is currently checked so I can know if my box is checked or Not by using that checked property and I can check all three of them check just a couple of them and so on I can actually use that check state to expand or collapse my content in my cutoff text section now to do this is going to require some fairly Advanced CSS we're going to be needing to use the has selector I have an entire video covering the has selector you can check out in the comments and description down below if you're unfamiliar with it essentially what we we want to do is we want to select our cutoff text and we want to select it only if there is a check box that is checked afterwards as you can see we have our text and then we have a checkbox directly after so if the check box directly after this paragraph tag is checked then we want to you know just change the height of our cutoff text so if it has inside of it a direct sibling that is our expand button and if it is checked that means that we want to expand this so I'm going to change my height here to auto so now if I click on any of these it should be expanding and collapsing the reason it's not is because we used Max height up here instead of height let me make sure I change this to Max height instead of height now if I click on any of these we should be expanding and collapsing it looks like this is still not working and that's because our Max height should be none instead of Auto I just had this confused with height now if I click on any of these you can see I can expand them all individually I can collapse them all individually and it looks great the only problem you'll notice is that we have our you know x to the bottom that is still being partially transparent that white background is showing up over top of it so in order to remove that effect all we need to do is we just need to make sure we only show this section whenever we are not currently in the expanded state so we could do another has selector to check for this we want to check to see when we have that expand button directly afterwards we want to check to see if it is not checked because only when this button is not active do we want to show this now you can see by default everything has that hidden state but if we expand things you can see that white border or that white background goes away and that's all it takes to create this really cool effect using just CSS now if you want to watch Kevin's video which inspired my video on this I'll have it linked right over here also if you want to check out that has selector more in depth again I'm going to link that video right over here with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 109,456

Keywords: webdevsimplified, max text lines css, css, css project, css :has, css :has selector, css read more button, css expand button, css button, css limit text lines, limit text, css limit text, css vertical text overflow, css text overflow

Id: OhCzEjXvY9A

Length: 11min 52sec (712 seconds)

Published: Sat Nov 19 2022