WEBVTT FILE





1
00:00:05.690 --> 00:00:13.950
in this video we're going to learn some text effects alright we were using again

2
00:00:13.950 --> 00:00:20.490
the same source code of the different span so first we're gonna populate

3
00:00:20.490 --> 00:00:26.760
suppose the Facebook and the Apple dibs with some texts so we want only text so

4
00:00:26.760 --> 00:00:48.180
no paragraphs and no spans okay so let's just copy paste okay okay

5
00:00:48.180 --> 00:00:52.110
we're gonna move to the Apple div in a bit once we are done with the Facebook

6
00:00:52.110 --> 00:01:02.609
one so now as we can see the text in the Facebook div is overflowing and we're

7
00:01:02.609 --> 00:01:06.330
gonna play a little bit with a few attacks effects so that we can

8
00:01:06.330 --> 00:01:14.820
understand how we can control how our text is displayed inside the additive or

9
00:01:14.820 --> 00:01:20.970
outside the div so the first property we're gonna use here is the overflow

10
00:01:20.970 --> 00:01:28.710
property so we want this overflowing text to disappear so the this property

11
00:01:28.710 --> 00:01:39.270
needs to be set to hidden and now we don't see any text overflow okay also we

12
00:01:39.270 --> 00:01:44.520
mentioned that the text is erupt by default okay

13
00:01:44.520 --> 00:01:51.450
so inside the div and if we don't want that there is a property which is the

14
00:01:51.450 --> 00:01:58.829
whitespace property and we can set that to no RUP and basically the text now is

15
00:01:58.829 --> 00:02:10.890
not trapped anymore okay all right so another useful property we can use here

16
00:02:10.890 --> 00:02:16.890
is to make this broken word disappear so we

17
00:02:16.890 --> 00:02:24.319
want to show the user as we've got some text following using some dots in there

18
00:02:24.319 --> 00:02:34.590
so the property we're going to be using here is text overflow and we can set

19
00:02:34.590 --> 00:02:43.469
that to ellipsis and now we don't see that next word anymore so we only see

20
00:02:43.469 --> 00:02:50.220
those dots telling us that there is still text following if we want to see

21
00:02:50.220 --> 00:02:55.950
what's happening there we can just change the width of the window and we

22
00:02:55.950 --> 00:03:03.599
can see some more text all right now let's move to the appellee but before we

23
00:03:03.599 --> 00:03:09.720
do that let's add another prophecy so now if we want to make the overflow

24
00:03:09.720 --> 00:03:18.540
visible when we hover over the div how are we going to do that so we're gonna

25
00:03:18.540 --> 00:03:33.269
need to set a new style for the blue box class so we're gonna say dot blue box

26
00:03:33.269 --> 00:03:41.269
class : and then Hoover so we're telling the browser so if the user hovers on the

27
00:03:41.269 --> 00:03:54.359
blue box class then change the overflow to visible okay so now if we hover on

28
00:03:54.359 --> 00:04:00.500
the Facebook tip all the oil flow becomes visible but due to the app

29
00:04:00.500 --> 00:04:05.639
property we still not seen this property very well but now it's pretty clear

30
00:04:05.639 --> 00:04:13.400
that's when we hover on the Facebook give the overflowing text appears okay

31
00:04:13.400 --> 00:04:17.030
all right so now let's move to the Apple Dave this

32
00:04:22.759 --> 00:04:28.520
time okay let's also let's populate the Apple

33
00:04:28.520 --> 00:04:32.570
live with some text but before we do that we're gonna change the width so

34
00:04:32.570 --> 00:04:38.330
rather than having an auto with we want a limited with let's go for 400 pixels

35
00:04:38.330 --> 00:04:48.850
for instance and now let's add some text to the Apple Live

36
00:04:53.900 --> 00:05:08.330
okay let's have a word a long word okay let's have long

37
00:05:12.609 --> 00:05:28.069
Apple let's have another long word this time let's make it really long okay so

38
00:05:28.069 --> 00:05:35.089
what's happening here so we can see this the text is overflowing okay this time

39
00:05:35.089 --> 00:05:43.339
we're gonna use some other properties to control how text is displayed so the

40
00:05:43.339 --> 00:05:51.109
first one is going to be a word break and we're going to use this property to

41
00:05:51.109 --> 00:06:02.629
be able to break the line even between two letters okay so the reason why we

42
00:06:02.629 --> 00:06:06.949
had a line break there is because this word is too long but we couldn't break

43
00:06:06.949 --> 00:06:13.939
it but now we're gonna set this property of word break to break all now we can

44
00:06:13.939 --> 00:06:20.419
see that this word is broken so you can see that it's broken between the letter

45
00:06:20.419 --> 00:06:31.129
L and the letter e all right if we don't want to break words so you just set it

46
00:06:31.129 --> 00:06:38.299
to keep all and now we're not breaking we don't have any line breaks between

47
00:06:38.299 --> 00:06:46.849
two letters okay so let's get rid of these of these properties for now and

48
00:06:46.849 --> 00:06:53.119
let's try something else so now if we look at this long word here we won't

49
00:06:53.119 --> 00:07:00.949
want to find a way to wrap this word and break it so the property you're gonna

50
00:07:00.949 --> 00:07:09.199
need for that is gonna be word wrap and this time we want to break the way so

51
00:07:09.199 --> 00:07:14.209
we're gonna say break word so what we've seen here first of all we're wrapping

52
00:07:14.209 --> 00:07:21.169
this word and also the word is not overflowing anymore so it's it gets

53
00:07:21.169 --> 00:07:31.410
broken there between two letters okay and the also we can set the overflow to

54
00:07:31.410 --> 00:07:40.380
hidden just to avoid any text of lowing of the box