You've already started watching Overflow and Wrapping

Resume Video Start Over

Overflow and Wrapping


In this video, you'll learn how to condense text using CSS3 properties like text-overflow and word-wrap. This is useful when in designs with fixed amount of spaces for text.

  • 0:00

    [?mellow guitar music?]

  • 0:03

    [Think Vitamin Membership - Est. 2010] []

  • 0:07

    [CSS3 Typography - Overflow and Wrapping with Nick Pettit]

  • 0:13

    CSS3 provides a few new ways to manage text in situations

  • 0:16

    where there may not be enough room to fit it all.

  • 0:19

    In this video,we'll introduce a few new properties.

  • 0:22

    Sometimes when you're making a website,

  • 0:25

    you don't always have all the room you need for text.

  • 0:28

    You might need to crunch text into a very narrow space,

  • 0:31

    even if that means that text will get cut off.

  • 0:34

    For example, if you're designing a blog

  • 0:36

    and you have a fixed amount of space for the title of a post,

  • 0:40

    what happens when the text you type in

  • 0:42

    exceeds the space you've allocated in your design?

  • 0:46

    Well, fortunately, there are a few CSS3 properties

  • 0:49

    that can help us handle situations like that.

  • 0:51

    So here, we have a basic HTML page,

  • 0:55

    we have some lorem ipsum text and a URL,

  • 0:58

    which we'll get to a little bit later in.

  • 1:01

    It's pretty basic HTML--we just have a wrapper div,

  • 1:06

    some paragraphs, and that's pretty much it.

  • 1:10

    And for the styling, we just have some boilerplate stuff

  • 1:15

    for the body, and some styling for the wrapper to center the page.

  • 1:19

    So the first property we're going to look at is text overflow,

  • 1:23

    and text overflow basically will clip text if it overflows the bounds of an element.

  • 1:32

    First, we'll go ahead and apply a class to this paragraph so that we can select it.

  • 1:38

    We'll call this one clip <p class="clip">

  • 1:42

    and we'll go ahead and make some room so that we can work.

  • 1:46

    We'll select our paragraph and we'll give it a width of 400px.

  • 1:54

    Let's go ahead and see what that looks like in the browser.

  • 1:58

    You can see that our text is being constrained here, as you would normally expect,

  • 2:04

    so let's go ahead and set the overflow value to hidden,

  • 2:12

    we'll set white-space: nowrap;

  • 2:17

    and we'll set text-overflow: clip;

  • 2:23

    So here you can see that our text is now being clipped off at the end here.

  • 2:29

    So now, we'll go ahead and switch back to our text editor

  • 2:32

    and we'll try a different value for our text overflow property,

  • 2:36

    because while clip looks okay, it's not exactly ideal.

  • 2:42

    It would be nice if we could put in a little ellipses there

  • 2:46

    so that people know that the text is sort of ending

  • 2:50

    and we can do just that using the ellipses value.

  • 2:53

    So we'll actually go ahead and set another class on our next paragraph here,

  • 2:59

    and we'll go ahead and call this one class="ellipsis"

  • 3:09

    and we'll select that paragraph

  • 3:14

    and we're just going to copy and paste all of our styles here

  • 3:18

    because we're actually just going to change this one value here,

  • 3:21

    text-overflow: ellipsis;

  • 3:25

    and when we switch back to the browser and refresh,

  • 3:28

    you can see that we have our nice three little dots there.

  • 3:32

    So now we're going to try and crunch this URL.

  • 3:36

    It's not really ideal to put an ellipses or just cut it off,

  • 3:40

    so instead, we're going to use another property called word wrap.

  • 3:46

    So we'll go ahead and put a class on our paragraph here,

  • 3:52

    and then we'll select that p.wordwrap {

  • 3:59

    and we'll give it a width: 400px;

  • 4:02

    and then we'll apply the property word-wrap and we'll use the value break-word.

  • 4:12

    And when we switch back to the browser and refresh,

  • 4:15

    you can see that this URL is now being constrained by 400px

  • 4:19

    and the word is being dropped down to the next line.

  • 4:23

    This is really useful in situations where you have a limited amount of space

  • 4:27

    and you need to display a long string with no spaces.

  • 4:32

    Another example might just be a really long word,

  • 4:35

    like supercalifragilisticexpalidocious.

  • 4:38

    That's it for text overflow and word wrap.

  • 4:40

    In the next video we'll learn how to create multi-column layouts.

  • 4:44

    [?mellow guitar music?]

  • 4:45

    [Think Vitamin Membership - Est. 2010] []

Show full transcript