CSS: How to set manual hyphenation?

The variant “hyphens: auto;” can cause grammatically unclean wrapping, especially on small displays. Here it is advisable to make a manual adjustment, at least for very long words.

For this purpose, a “breaking point” is created at the corresponding word with:

­

To prevent wrapping from occurring in the desktop view as well, this is restricted with media queries:

@media only screen and (max-width: 825px) { 
  p { 
    -webkit-hyphens: manual !important;
    -ms-hyphens: manual !important;
    hyphens: manual !important;
  }
}