It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
Say you have a really long word within some text inside an element that isn’t wide enough to hold it. A common cause of that is a long URL finding it’s way into copy. What happens? It depends on the CSS. How that CSS is controlling the layout and what the CSS is telling the text to do.… Read article “Where Lines Break is Complicated. Here’s all the Related CSS and HTML.”
The word-break property in CSS can be used to change when line breaks ought to occur. Normally, line breaks in text can only occur in certain spaces, like when there is a space or a hyphen. … Read article “word-break”
There are times when a really long string of text can overflow the container of a layout.
For example:
URL’s don’t typically have spaces in them, so they are often culprits.Here’s a big snippet with all the CSS players involved:
.dont-break-out {
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard 