CSS In-Depth, v2 CSS In-Depth, v2

Text Overflow, Word Wrap & Calc

Check out a free preview of the full CSS In-Depth, v2 course:
The "Text Overflow, Word Wrap & Calc" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Estelle shows how to wrap text or hide the overflow, which showing ellipses to indicate there's missing text. Then she reviews the ellipses and word-wrap properties and discusses using calc() in the value to compute property values on the fly.

Get Unlimited Access Now

Transcript from the "Text Overflow, Word Wrap & Calc" Lesson

[00:00:01]
>> Estelle: Then we have text overflow ellipsis. So,
>> Estelle: That's weird the background color totally disappeared. So here I have three paragraphs. And they have various number of properties, there's text-overflow ellipsis, white-space nowrap and overflow-hidden. You need to have overflow-hidden and white-space nowrap, and text-overflow ellipsis for it to work.

[00:00:34] If you don't have ellipsis they won't work obviously, but if it's allowed to wrap. If this was actually working as the slide was intended the first one actually wraps. But between this morning when I checked it and now it just disappeared. Because live coding. Okay, then we have wrap word wrap, which basically says can you break words or not?

[00:00:59] But we learned hyphenation, hyphenation is much better than word wrap. So I would actually go with hyphenation instead. Then we have calc() which is, we're able to use for properties, for values rather. You can use calculations and use plus, minus, multiply, divide, min and max operators within the calculations, so you can basically say 50%- 40 pixels.

[00:01:28] So if you have basically, you know you have padding on each side and you want to be half than you do 50%- 80 for the 80 pixels. And it will actually calculate it for you. And it's very well supported now in most browsers.