Up next in 10
How To Limit Lines Of Text With CSS Only
2K views
Feb 7, 2024
"How To Limit Lines Of Text With CSS Only" is an instructional video demonstrating how to use CSS to restrict the number of lines of text displayed within an element on a webpage. Throughout the tutorial, viewers are guided through the process of implementing this feature without the need for JavaScript. The video covers essential concepts such as CSS properties like line-clamp, overflow, and text-overflow, allowing viewers to understand and apply these techniques effectively. By following clear demonstrations and explanations, viewers learn how to control the presentation of text content to ensure it fits within designated space constraints, improving readability and visual consistency on their websites or applications. Whether you're a beginner or an experienced developer, this tutorial offers valuable insights into managing text overflow using CSS alone.
View Video Transcript
0:00
If you've ever tried to show only three lines of text in a box, you know how difficult that
0:04
is if not impossible to do in CSS, but in today's video I'm going to show you not only
0:09
how to do that in two different ways, but also how you can create dynamic expand and
0:13
collapse buttons all with just CSS and no JavaScript at all. Welcome back to WebDev Simplified
0:23
My name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner
0:27
As you can see here we have these dynamic expand collapse buttons and we have the ability
0:31
to limit text based on how many lines we want to have shown, for example, three lines, four
0:35
whatever it is. And all of this is using just CSS and HTML, no JavaScript at all
0:40
I'm going to show you multiple ways to do this text limiting as well as this expand
0:44
collapse button. Now to get started, this is the demo that we're working with. We just have these really simple cards showing up
0:49
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
0:54
You want them to be about the same height. So we're going to limit the text to a set number of lines
0:58
But normally doing that in CSS is very difficult. Now recently I ran across a video by Kevin Powell where he showed a technique on how
1:04
to actually do this where you limit something to a set number of lines. And it's really cool
1:09
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
1:12
done it in the past. And then we're going to jump into those expand collapse buttons
1:16
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
1:23
And we're going to say here, class is going to be cut off text
1:28
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 showed
1:34
up on our screen. So nothing too crazy here. Now we can move into this cut off text section
1:39
And the first thing that I want to do is I want to create a CSS variable that is going
1:43
to be for the max number of lines that we want to show. I'll just set that to three
1:46
This just makes it so we can actually modify this in the HTML and set any number of lines
1:50
we want. And then the next thing I need to do is we need to set a couple of different properties
1:54
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
1:59
again, I'll have linked in the cards for you. The first thing that we need to do is we needed to set the display here to WebKit box
2:06
Now this is all going to be using WebKit properties, which is normally things like the Chrome browser
2:10
and Edge. Those are WebKit based browsers. But these properties are so popular that all the major browsers have implemented them
2:16
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 WebKit line clamp
2:23
So WebKit line clamp just like this. And this is where we need to set it to the number of lines we want, like three or four
2:29
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
2:37
That's because we need to do a few other things. First of all, we need to set an overflow here to hidden
2:41
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 WebKit box
2:47
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
2:52
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
3:01
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
3:08
Now, if we, for example, did not have overflow hidden, you can see all the extra text is
3:12
showing up. And if we were missing any of these different properties, nothing's going to work
3:16
So it's a little bit finicky to get this situation to work, but the nice thing is, is it works
3:19
really easily. It's just a couple of properties you needed to find. You automatically get this as ellipses at the end
3:25
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
3:32
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
3:37
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
3:42
yourself and you can actually use any different display properties or whatever else that
3:45
you want out there. So what we need to do is we're going to get rid of all the code that we currently have
3:50
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
3:55
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
4:00
That's just because oftentimes you have a different line height than just the standard one, for example, 1.4
4:04
And we need to take that into account when we determine our height, because essentially the height of a line of text is just our line height times the actual font size
4:12
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
4:17
We can just say calc here. Our calculation is going to be a variable, which is our max lines
4:22
We can get our max lines. We can multiply that by 1em, and that's essentially our font size
4:27
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
4:33
this variable is five. This is 1em. And then we just need to multiply that by our line height to make sure we take into
4:39
account how tall our different lines are. If we do that immediately, you can see all of these boxes are now limited to exactly
4:44
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
4:50
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 it's taking
4:56
into account that extra line height. Now we could probably make this a max height
5:01
And the reason for that is if we, for example, set this to like 15 lines, not all of these
5:05
have 15 lines of text. As you can see, Article 3 has less than 15 lines, so it doesn't fill that full height
5:10
If we had this set to height, for example, they would all be that same height. So I generally prefer to use max height in this scenario
5:16
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
5:21
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
5:29
cutoff text before element that we can make have that fade effect for us
5:33
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
5:41
And one thing that is going to happen eventually in CSS, CSS is going to have a new unit called
5:45
the LH unit, just like this. And that essentially is the same as whatever your line height is
5:51
Currently, it's not available in any browser. When I save, you can see this doesn't actually work
5:55
But when that becomes a thing, you can just use that instead of this line height hack that we're using here
5:59
Let's set this back to like three lines, for example. And now let's create that fade effect
6:04
For 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
6:11
our text. There we go. Because we have position relative on our text
6:15
Next, we need to have our height here. And the height is going to be rather straightforward
6:19
I just want it to be one line tall. So we're going to use a calculation here, which is one EM times our line height
6:26
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
6:33
So it shows up on the very bottom. And then what we can come inside of here is we can say pointer events, none
6:39
That just means that it's not selectable at all, which is really useful. And then we can do our background
6:43
For our background, we're going to do a linear gradient. I want it to be a linear gradient that goes to the bottom
6:49
So at the start, at the top, it's going to be transparent. And then it's going to change to white
6:54
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
6:59
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
7:05
the bottom portion. And you notice I can highlight my text. That's because I have pointer events none
7:09
If I remove that, I now can't select the things behind there. So that's why we have that pointer events right there
7:14
I kind of like it to be a one line effect. So it's really subtle, but you know, it's each your own preference
7:19
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
7:26
You can see nothing at all breaks. While with the old technique, we couldn't do that
7:30
This is why I really like this technique. It's a little bit more set up because you need to know how much your line height is
7:35
But other than that, it works exactly the same. It gives you the same result, but with a little bit more flexibility
7:40
Now the final thing I want to show you how to do, which is really cool, is these dynamic expand and collapse buttons
7:44
And these again require no JavaScript at all. So in order to do that, we need to go to our HTML
7:48
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 checkbox
7:56
The reason for that is we can actually check to see if our checkbox is checked or not
8:00
And that can be our expand or collapse state. Let's just put our type of checkbox in here
8:05
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
8:12
So as you can see, we now have a checkbox inside of each one of our different articles. It doesn't have a label or anything
8:17
That's perfectly okay. Now what we need to do on top of that is we need to style this button
8:21
So let's do our expand button. And the first thing I want to do is say appearance none
8:26
What that's going to do is you're just going to remove the checkbox. As you can see, the checkbox has disappeared. It essentially hides it, which is perfect
8:31
That's exactly what we want to do because we want to create our own custom button looking element instead
8:35
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
8:41
pixel solid black border. We're going to have padding, which is 0.5 EM, a border radius, 0.25 EM
8:49
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
8:54
So we'll do like one REM. There we go. Now we have essentially, it still looks like a checkbox, but when we click on it, you know
9:00
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 that we're going to come in here with
9:08
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
9:15
That looks really good. Now the next step is going to be adding in the text that we want to have
9:19
And that's actually really easy. We can just do the before element. For example, I can change my content here to say expand
9:26
And now when I say, if you can see all of these say expand inside of them, that's exactly what we want
9:30
And what we can also do is we can say that if any of these are checked, then we can change
9:36
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
9:43
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
9:49
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
9:58
Now to do this is going to require some fairly advanced CSS. We're going to be needing to use the has selector
10:02
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
10:08
Essentially what we want to do is we want to select our cutoff text and we want to select
10:12
it only if there is a checkbox that is checked afterwards. As you can see, we have our text and then we have a checkbox directly after
10:18
So if the checkbox directly after this paragraph tag is checked, then we want to, you know
10:23
just change the height of our cutoff text. So if it has inside of it a direct sibling, that is our expand button
10:31
And if it is checked, that means that we want to expand this
10:35
So I'm going to change my height here to auto. Now if I click on any of these, it should be expanding and collapsing
10:41
The reason it's not is because we used max height up here instead of height
10:46
So 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
10:51
It looks like this is still not working and that's because our max height should be none instead of auto
10:56
I just had this confused with height. Now if I click on any of these, you can see I can expand them all individually
11:01
I can collapse them all individually and it looks great. The only problem you'll notice is that we have our, you know, text at the bottom that
11:06
is still being partially transparent. That white background is showing up over top of it
11:10
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
11:17
So we can do another hasSelector to check for this. We want to check to see when we have that expand button directly afterwards
11:24
We want to check to see if it is not checked because only when this button is not active
11:28
do we want to show this. Now you can see by default everything has that hidden state, but if we expand things
11:33
you can see that white border or that white background goes away
11:37
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
11:44
right over here. Also, if you want to check out that hasSelector more in depth, again, I'm going to link that
11:48
video right over here. With that said, thank you very much for watching and have a good day
#Crafts
#Outdoors
#Programming
#Web Services