Overflow and Wrapping

4:47

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.


Video Transcript

  • 0:00

    [?mellow guitar music?]

  • 0:03

    [Think Vitamin Membership - Est. 2010] [membership.thinkvitamin.com]

  • 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] [membership.thinkvitamin.com]

Show full transcript

Workspace

You have to sign up for Treehouse in order to create workspaces.

Sign up

Downloads

You have to sign up for Treehouse in order to download course videos.

Sign up

Instructor

  • Nick Pettit

    Nick is a designer, public speaker, teacher at Treehouse, and co-host of The Treehouse Show. His Twitter handle is @nickrp.