When a Line Doesn’t Break

When a Line Doesn’t Break

css-tricks.com css-tricks.com1 year ago in#Dev Love55

We expect a line to break when the text on that line reaches the parent box boundaries. We see this every time we create a paragraph, just like this one. When the parent box doesn’t have enough room for the next word in a line, it breaks it and moves down to the next line and repeats that process. Well, that’s how it works when words are separated by spaces or other whitespace. As far as CSS goes, there are five (!) properties that can possibly affect how and when a line breaks. Let’s not get into all that again though. Let’s instead look at a situation where it seems like a line is going to break but it doesn’t as an excuse to learn a little something about line breaking. What happens in a situation where there is no way for the browser to know when it’s OK to make a break? Let’s get ourselves into a bad situation with a “tag list” and then get ourselves out of it. Here’s our markup:   PHP   JavaScript   Rust   Next, we’ll apply CSS that overwrites the default list style from its default vertical orientation to horizontal by making the list items display inline. ul {   margin: 0;   padding: 0;   list-style: none; } 
 li {   display: inline;   padding-right: 5px; } The list looks just like we want it. I added a little bit of space between one list item and another, so it doesn’t look too crowded. Now let’s introduce a wrapper element to the mix. That’s essentially a div around the unordered list. We can give it a class, say, .tags.       PHP     JavaScript     Rust   Let’s say we want to give the wrapper a fixed width of 200px. That’s where we should expect to see line breaks happen as the unordered list bumps into wrapper’s boundaries. .tags {   width: 200px; } Here comes the interesting part. Many people use minifiers in their build process to reduce file sizes by getting rid of unnecessary values. Some of these values are whitespaces, which includes spaces, tabs, and line breaks (such as carriage return and line feed) characters that are use for formatting purposes but considered by minifies to be irrelevant to the final result. If we “minify” our HTML by removing new lines, then this is what we get: PHPJavaScriptRust UH OH. As you can see, the list is not breaking at the 200px boundary anymore. Why? What is different now? Personally, I thought HTML didn’t care about whitespaces. What is so different about the minified version from the original markup? The browser does actually care about whitespaces… but only sometimes. And this just so happens to be one of those instances. When the page is being parsed, the parser sees this list as one long word because, from its perspective, there are no characters that differentiate one from the other. One might think having the padding is affecting things. But if we remove the padding from our list items we still get the same result… only with no spacing between items. The browser sees the entire list as a single word. We can get natural line breaks from special characters Besides spaces, excluding non-breaking spaces ( ), there are some other characters that will force a line break,  » Read More

Like to keep reading?

This article first appeared on css-tricks.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply