This course may contain valuable CSS information for reference, but does no longer reflect our course quality standards.

Check out a free preview of the full CSS In-Depth, v2 course:
The "Use Cases: Hyphenations" 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:

Overview of CSS Hyphenation, HTML's &shy; character and the <wbr> element.

Get Unlimited Access Now

Transcript from the "Use Cases: Hyphenations" Lesson

>> Estelle Weyl: So this is just to introduce another feature which is hyphens. There's Hyphenation, there's WBR, and there's Shy. WBR is element it is HTML. It's not CSS and you can put it anywhere where you want to save, this would be a good place for a word break. And then Shy is a dash that is optional, if it's at the end of the word put a dash here, if it's not don't.

[00:00:35] So those are ways of doing it in the HTML. In CSS you can just do hyphens auto. And here I'm just going to get rid of it. So here are some hyphens right here because supercalifragilisticexpialidocious, twice. Breaks twice in the middle of the word. Then I type in x.

[00:00:56] My hyphens isn't working. So, you might want to use hyphens if you have a really small screen, and so it would actually be max width would make more sense, right? So let's play with that one, and let's do max width.
>> Estelle Weyl: Because when you have a really big screen, you don't want hyphenation.

[00:01:27] But, when you have a really small screen,
>> Estelle Weyl: You want hyphenation, right? Because this, without hyphenation, would look terrible. You'd have so many things that were just three letters on one line. So that's hyphenation. you can use it with or without media queries. So that's hyphens auto, that's an other feature.