Shorten Text with CSS

[MUSIC] 0:00 Hey, what's up? 0:09 It's Dustin, back with another quick CSS tip for you. 0:10 Ever set up a UI with some carts that had text content, and 0:13 quickly realized how hard it was to keep a clean and 0:16 consistent UI when each card had different lengths of text? 0:19 Trying to size everything just right to make the cards look 0:23 consistent is most of the time next impossible. 0:26 But I wanna show you how we can hide text past a certain amount of lines 0:28 automatically so that our UI can look more consistent. 0:32 While this is all done with CSS, I will write this in SCSS so 0:36 that I can show you a fun way to do this with mixins when we're finished. 0:39 In our styles, we will need to make sure we are targeting the direct tag for 0:43 our text, not the parent tag or container. 0:47 And the first property we'll give is a display of WebKit box. 0:50 This is not something you'll see very often, but 0:53 what this does is it packs its contents in the direction of its layout. 0:56 And this effect is only visible if there's some extra space in the container. 0:59 Next, we'll add a property for text overflow and we'll set it to ellipsis. 1:03 And this will give the three dots that you see at the end of our text. 1:07 And then we'll add an overflow of hidden, so that it hides our overflowed content. 1:11 And then next we'll set the WebKit box orient to vertical. 1:16 And last but most important part is the webkit-line-clamp. 1:20 This property takes a numerical value, and 1:24 this value is how many lines that you would like visible in your text content. 1:27 So I have webkit-line-clamp set to 3. 1:31 And if I hit Save, you will notice in the browser that all of our text 1:34 content is now constrained to three lines of text. 1:38 And the overflow is set with an ellipsis. 1:41 And that's all there is to it. 1:44 It's actually pretty simple to do. 1:46 And I can make it even simpler by creating a mixin for this. 1:48 So I can type in @mixin. 1:53 We'll call this text overflow, and we'll give it a lines argument. 1:54 We'll give it the content property. 1:59 And then we will paste in all of the properties that we set in earlier for 2:01 our card description. 2:05 And for webkit-line-clamp, we will set in our lines argument. 2:07 We can delete all of those styles from our card description, and 2:12 instead write @include text-overflow. 2:16 And we'll give it 3, and we'll notice that nothing changes in the browser. 2:18 So we can set it to 2, and then we'll have two lines. 2:22 You can play around with these values and find out what works best for you. 2:26 Make sure you use this feature only when it's necessary. 2:31 You definitely don't wanna hide important text to the user. 2:34 That being said, with just a little bit of JavaScript, 2:37 you can toggle this feature on and off with something like a Read More button. 2:40 Be sure to let us know if that's something that you'd like to see. 2:43 Also make sure to check out the teacher's notes on description of this video for 2:46 links to content on SCSS if that's something that you'd like to learn. 2:51 Until next time, have fun and happy coding. 2:55

You need to sign up for Treehouse in order to set up Workspace

Sign up