Let’s talk about the different ways we can control how text breaks (or doesn’t) on a web page. CSS gives us a lot of tools to make sure our text runs the way we want, but we’ll also cover some tricks using HTML and special characters.
Protect layout
Usually, newline text follows at “soft wrapping opportunity”, which is a fancy name for places where you’d expect text to break naturally, such as between words or after a dash ‘ link. But sometimes you can get long pieces of text that don’t have flexible line breaks, such as very long words or URLs. This can cause all sorts of layout problems. For example, text could overflow its container, or it could force the container to become too wide and push everything out of place. This is good defensive code to anticipate problems with unbroken text. Fortunately, CSS provides us with several tools to do this.
Get overflow text for line breaks
Set overflow package:
break-word on an element will allow text to break in between words if needed. It will first try to keep a word unbroken by moving it to the next line, but then it will break the word if there is still not enough room.
There is also overflow:
anywhere, cut the words the same way. The difference is how it affects the calculation of the minimum content size of the element it rests on. It’s easy to see when the width is set to min content.
.Top Width:
minimal content; overflow:
key word ; } .bottom width:
minimal content; overflow:
everywhere; }
The top element with overflow:
break-word computes the minimum content as if no words were broken, so its width becomes the width of the longest word. Bottom element with overflow:
anywhere computes the minimum content with all the breaks it can generate. Since breaking can happen, well, anywhere, the final minimum content is only one character wide. Remember that this behavior only comes into play as far as minimal content is concerned. If we had set the width to a fixed value, we would see the same word break for both.
Break words mercilessly
Another option for breaking words is to skip the word:
Break everything. This won’t even try to keep the words intact – it will break them instantly. Have looked. Note that the long word is not carried over to the next line, like when using overflow. Also note how the “words” are broken up, even though they may match perfectly on the next line.
word break:
break-all has no problems with word breaks, but is careful about punctuation. For example, this will avoid starting a line with a period at the end of a sentence. If you want a really definitive line break, even with punctuation, use a line break:
everywhere. See how to break words:
break-all moves “k” down to avoid starting the second line with “.” ? In the meantime, line breaks:
anywhere do not care.
excess punctuation
Let’s see how the CSS properties we’ve covered so far handle very long ranges of punctuation.
overflow:
keywords and line breaks:
anywhere can keep everything contained, but then there’s a word that breaks:
break-all gets weird with punctuation again – this time resulting in overflowing text.
This is something to keep in mind. If you don’t want the text to overflow at all, be aware that word breaks:
break-all will not stop punctuation.
Specify where words can break
For more control, you can manually insert word breaks into your text using . You can also use the “zero-width space” provided by the HTML entity (yes, it should be uppercase as you see!).
See them in action by wrapping a long URL that wouldn’t normally wrap, just between segments.
<!– normal –>
https:
//subdomain.somewhere.co.uk
<!– –>
https:
// subdomain.somewhere.co.uk
<!– –>
https:
// subdomain.somewhere.co.uk
