The internet is made up of content, content is made up of words, and words can be very, very long. And sooner or later, a webmaster is faced with the problem of long words hyphenation. This problem is especially true for responsive design, and for small blocks of content. So how do you deal with this problem?

Hyphen

The first solution to hyphenate long words is with a hyphen.

Defisi (-webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto;)

Browser Support: CSS hyphens are supported by almost all modern browsers except Chrome, Opera, Android. Also, very often the hyphen is inserted in places that are erroneous from a grammatical point of view.

Break word

Word break is a CSS property that specifies whether to break lines within words.

Obriv-slova (-ms-word-break: break-all; word-break: break-all; word-break: break-word;)

Browser support: Word break is supported in all browsers except Opera Mini and older versions of Opera.

Overflow wrapper

The next solution is to use overflow-wrap.

Obertka-perepolneniya (word-wrap: break-word; overflow-wrap: break-word;)

Browser Support: Supported in almost all browsers. Note: Some browsers require the use of "word-wrap" instead of "overflow-wrap".

Ellipsis

Another option is to use ellipsis.

Mnogotochiye (overflow: hidden; white-space: nowrap; text-overflow: ellipsis;)

Browser Support: Supported by all modern browsers.

This is a working method, but far from perfect.

Final solution: Using the Overflow and Hyphen Wrapper.

Finalnoye-resheniye (overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto;)

This solution will allow the browser that supports it to insert the hyphen and, for the non-supporting browsers, insert the line break.