Dealing with long words in CSS

Final solution

This solution will show hyphens for every browser supporting it and will break lines in every other browser – perfect. This is a useful technique when you need to deal with long words in your web design. For example, when you need to reference a long city name.

.hyphenate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}