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;
Without cookies
This website does not use cookies or tracking. More information can be found in the privacy policy.