1
00:00:00,000 --> 00:00:09,284
[MUSIC]

2
00:00:09,284 --> 00:00:10,310
Hey, what's up?

3
00:00:10,310 --> 00:00:13,587
It's Dustin,
back with another quick CSS tip for you.

4
00:00:13,587 --> 00:00:16,949
Ever set up a UI with some carts
that had text content, and

5
00:00:16,949 --> 00:00:19,892
quickly realized how hard
it was to keep a clean and

6
00:00:19,892 --> 00:00:23,491
consistent UI when each card
had different lengths of text?

7
00:00:23,491 --> 00:00:26,464
Trying to size everything just
right to make the cards look

8
00:00:26,464 --> 00:00:28,962
consistent is most of
the time next impossible.

9
00:00:28,962 --> 00:00:32,985
But I wanna show you how we can hide
text past a certain amount of lines

10
00:00:32,985 --> 00:00:36,319
automatically so
that our UI can look more consistent.

11
00:00:36,319 --> 00:00:39,634
While this is all done with CSS,
I will write this in SCSS so

12
00:00:39,634 --> 00:00:43,705
that I can show you a fun way to do
this with mixins when we're finished.

13
00:00:43,705 --> 00:00:47,813
In our styles, we will need to make
sure we are targeting the direct tag for

14
00:00:47,813 --> 00:00:50,277
our text, not the parent tag or container.

15
00:00:50,277 --> 00:00:53,781
And the first property we'll
give is a display of WebKit box.

16
00:00:53,781 --> 00:00:56,018
This is not something
you'll see very often, but

17
00:00:56,018 --> 00:00:59,171
what this does is it packs its contents
in the direction of its layout.

18
00:00:59,171 --> 00:01:03,323
And this effect is only visible if there's
some extra space in the container.

19
00:01:03,323 --> 00:01:07,159
Next, we'll add a property for text
overflow and we'll set it to ellipsis.

20
00:01:07,159 --> 00:01:11,387
And this will give the three dots
that you see at the end of our text.

21
00:01:11,387 --> 00:01:16,380
And then we'll add an overflow of hidden,
so that it hides our overflowed content.

22
00:01:16,380 --> 00:01:20,811
And then next we'll set the WebKit
box orient to vertical.

23
00:01:20,811 --> 00:01:24,737
And last but most important
part is the webkit-line-clamp.

24
00:01:24,737 --> 00:01:27,159
This property takes a numerical value, and

25
00:01:27,159 --> 00:01:31,427
this value is how many lines that you
would like visible in your text content.

26
00:01:31,427 --> 00:01:34,127
So I have webkit-line-clamp set to 3.

27
00:01:34,127 --> 00:01:38,439
And if I hit Save, you will notice
in the browser that all of our text

28
00:01:38,439 --> 00:01:41,750
content is now constrained
to three lines of text.

29
00:01:41,750 --> 00:01:44,842
And the overflow is set with an ellipsis.

30
00:01:44,842 --> 00:01:46,873
And that's all there is to it.

31
00:01:46,873 --> 00:01:48,629
It's actually pretty simple to do.

32
00:01:48,629 --> 00:01:53,236
And I can make it even simpler
by creating a mixin for this.

33
00:01:53,236 --> 00:01:54,950
So I can type in @mixin.

34
00:01:54,950 --> 00:01:59,633
We'll call this text overflow, and
we'll give it a lines argument.

35
00:01:59,633 --> 00:02:01,816
We'll give it the content property.

36
00:02:01,816 --> 00:02:05,711
And then we will paste in all of
the properties that we set in earlier for

37
00:02:05,711 --> 00:02:07,039
our card description.

38
00:02:07,039 --> 00:02:12,385
And for webkit-line-clamp,
we will set in our lines argument.

39
00:02:12,385 --> 00:02:16,173
We can delete all of those styles
from our card description, and

40
00:02:16,173 --> 00:02:18,784
instead write @include text-overflow.

41
00:02:18,784 --> 00:02:22,903
And we'll give it 3, and we'll notice
that nothing changes in the browser.

42
00:02:22,903 --> 00:02:26,985
So we can set it to 2, and
then we'll have two lines.

43
00:02:26,985 --> 00:02:31,429
You can play around with these values and
find out what works best for you.

44
00:02:31,429 --> 00:02:34,111
Make sure you use this feature
only when it's necessary.

45
00:02:34,111 --> 00:02:37,357
You definitely don't wanna hide
important text to the user.

46
00:02:37,357 --> 00:02:40,020
That being said,
with just a little bit of JavaScript,

47
00:02:40,020 --> 00:02:43,713
you can toggle this feature on and off
with something like a Read More button.

48
00:02:43,713 --> 00:02:46,795
Be sure to let us know if that's
something that you'd like to see.

49
00:02:46,795 --> 00:02:51,128
Also make sure to check out the teacher's
notes on description of this video for

50
00:02:51,128 --> 00:02:55,084
links to content on SCSS if that's
something that you'd like to learn.

51
00:02:55,084 --> 00:02:57,410
Until next time,
have fun and happy coding.