word-break

The word-break property determines if and how to break lines in the middle of words.

Normally, lines that don’t fit inside their container break in certain points, specifically where there’s a white space or a hyphen. But when the word-break property is set to break-all, the browser will break lines at any point, even in the middle of a word that comes at the end of the line and that would be too long to fit inside the container.

The result of breaking lines in the middle of words will be close to that which we get when we justify text inside an element (see text-align), except that white space is not affected, so there may be lines where a white space would be existent between the last word on the line and the edge of the container.

Trivia & Notes

The words broken at the end of each line by the word-break property become practically unreadable because there is no visual indication as to where the word has been broken.

A more readable and responsive alternative would be to use the word-wrap property in conjunction with the hyphens property to break long words and have the browser add hyphens at the points where the words have been broken. You can take it a step further and align the text using text-align: justify to get a full-width line effect with lines breaking words without sacrificing readability. You can read more and see more examples in the word-wrap and hyphens entry pages.