Lines break at normal word break points (e.g. whitespaces between words, specified in CSS as word-wrap: normal;, the default), and if you'd like lines break even if there are no acceptable break points (e.g. a line with a single very long word), you may use word-wrap: break-word; to force it.

Generally, I think it is a good idea to break a line within a word if there are no other proper break points, as this allows content to fit in the width of the container/viewport, especially for users on mobile, so that they won't get unnecessary horizontal scrollbar, this also ensures scroll left/right gestures for previous/next articles (if deployed on websites) won't be interfered.

I've set word-wrap: break-word; on the <body> element, which allows it to take effect on all elements, because word-wrap is an inherited property.

However, there is one more gotcha to be noted.

word-wrap: break-word; and the <pre> element

When word-wrap: break-word; is set on <pre> elements in IE/Edge, whether directly or by inheritance, it causes content in it to be wrapped when overflows the container, while in other browsers including Chrome, Firefox and Safari, content in <pre> won't get wrapped, because white-space: pre; is the default for <pre> elements.

Knowing the gotcha, if you'd also like to make word-wrap: break-word; the default, use

body {
  word-wrap: break-word;
}

pre {
  word-wrap: normal;
}

Notes

  1. word-wrap has been renamed to overflow-wrap, and the original name is now considered an "alternate name" for overflow-wrap. But the new name is not supported by IE, Edge, or Firefox < 49, while the old one is just supported by every browser.

  2. Chrome & Safari have word-break: break-word; as an alternative to word-wrap: break-word;, but that's non-standard and not available to IE, Edge or Firefox.

References