Controlling text wrapping - jQuery Tutorial

One of the most interesting things about our book cover is the way a single word is being displayed across multiple lines. You know, achieving this can be surprising tricky using CSS. So we're going to take a look at how we can control text wrapping in individual words. And what you're looking at in the browser right now is this 02_03 stacked file. So we're going to be working on stacked.htm from 02 to 03. And although I've done some basic type styling on the text for the book cover, one of the things that I've, I'm not controlling right now is the wrapping of the text itself. Because I have a defined width for the div tag that is the parent div tag. The sort of black box you're seeing there. You would think that because there's a defined width there that when the word reached the end of that it just would break down. But it doesn't quite work that way. Certain words will break and HTML does support hyphenation. But in the case of CSS, the, it simply looks at the overflow property to determine what to do and overflow can either hide it or it can make it visible. In this case it's running right (LAUGH) underneath, you can see it's running right underneath the book cover but it's not going to force the word itself to break. So to do that we have to use a couple of very specific CSS properties. So here I am back in the code editor again we're working with stacked.htm from 02 03. I'm just going to scroll down little bit. And what I'm looking for, is I'm looking for this stack selector right here. So right now you can see that all of I've really done is apply the font family of bebas-neue to it. I've increased the font size to 18m, so that's pretty big and I've given it a line height of 0.7ms. Now the reason that I've given a line height that's slightly smaller than the size of the text is because I want to have a lot of control over how that text moves up and down. And I want to control. The stacking of the text on top of each other once it breaks because once you break text on a single line, it's not a line break like you get when you have a paragraph. The line hide itself is going to determine how closely those letters are stacked together. Okay. So what I'm going to do, is I'm going to enter the next line here. And I'm going to use the property word wrap, word wrap. And I'm going to use the break word. So, essentially what word wrap, break word does is, it tells browsers, okay look, if the text is approaching the edge of its parent container, and it's not going to fit, don't worry about, you know extending it past it or hiding it, or anything like that. Just break it. And it doesn't matter where in the word it is. Now, of course, that means that we're not being specific about where it's breaking. I'm not saying, hey after the third character, go ahead and break this. I could do that using lettering. But, by controlling the size of the text and the size of the container, you can actually determine exactly kind of where this breaks. Now if I save this, and go back out to my browser, I can see that we're kind of getting what we want. Now I noticed you know the M is not up here where I want it to be. And I could sort of play around with the size of the text and, and also the size of the container. But the fact of the matter is we're going to be controlling things like kerning you'll notice that the c and the o here are overlapping but here they're not. So we're actually going to get a lot more space than we've got right now. So it's okay that it's not a 100% perfect. At least it's breaking and it's giving us what we want which is text going on multiple lines. Now the reason that these characters are touching each other like the O and the P and the C and the M is that sort of smaller line height that we were using there instead of a, a larger line height or line height that's larger than the text itself. It's causing the text to actually stack. Now, we could just leave it at that, that word wrap break word but that's actually an older CSS property. One of the things that happens a lot in CSS is that syntax gets changed. Sometimes for good reasons, sometimes for things that just make you kind of scratch your head little bit. Word wrap was an older Internet Explorer property, so don't say that Internet Explorer has never brought the world anything. Word wrap is pretty cool. But, you know, the people that were writing a CSS for whatever reason, even though the syntax of word wrap was pretty widely adopted, decided to change it a couple years ago. And they changed it, instead of word wrap, to over flow wrap. I guess that's a little bit more descriptive because that's what's happening here. We're taking the overflowing text and wrapping it. So I'm going to go down to the next line and I'm going to type overflow dash wrap, overflow wrap. And then I'm going to type in break dash word. Now, actually, word wrap is pretty well universally supported, so the reason I'm doing this, is I'm making the file a little bit more future friendly. So that in the future if there are browsers that recognize overflow wrap but not word wrap, it'll still work. So if I say that and I go back out to the browser, I'm not going to notice any difference. I'm just sort of covering my bases there by using both of those properties. Okay. It doesn't look exactly the way that we want it yet, but we are well on our way. Using the word and overflow wrap properties are a little easier to do than adding line breaks dynamically and it's going to make our code a little bit easier to maintain.