For responsive design we usually need to prevent long URLs and words from breaking layout on narrow screens. Here’s the CSS to break long words that fly out of a small screen layout.
-ms-word-break: break-all; word-break: break-all; /* Non-standard for webkit */ word-break: break-word; /* Add hyphens based on language */ -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto;
Hyphens Are Dependent on Language
It’s very important to add
lang="en" to html element. Otherwise hyphens wouldn’t appear. They depend on language libraries in browser, so you may test them with your own language too.
Word Wrap and Its Difference with Word Break
There is also another CSS code
word-wrap: break-word; which is better supported in browsers. It wraps words only when some width of a container specified. More similar to
white-space for words. I.e. with
word-break, text will continue inline and long words will go inline until they have to break to new line. With
word-wrap, words will go to a next line and only broken when run out of space. Also
word-wrap will not break words inside tables running out of layout, but
word-break would do.
word-break can break words in odd places, so I use to insert such code with media queries for small screens only.
Update for 2017: overflow-wrap
word-wrap has been renamed to
I found it is now better to use the following code, as it doesn’t break words in a wrong place, where possible. Browser support is great. So no
media queries required anymore. Also hyphens are added in more browsers, than with previous code.