Search code examples
csssafariline-breaksword-break

CSS- force words to new line rather than word-breaking

My client wants no words to be broken on his site. Example:

The dog went for a walk and ran to-
wards the car.

SHOULD BE

The dog went for a walk and ran 
towards the car.

The issue is only appearing in Safari. Does anyone know the CSS property to solve this?

Solution

  • Add the CSS rule

    * { -webkit-hyphens: none; }

    The only situations where Safari would hyphenate a word (which is what happens according to the description) are an explicit hyphenation hint, as in to­wards, or via automatic hyphenation via -webkit-hyphens: auto. Safari has been described as supporting automatic hyphenation, but this does not seem to apply to the Windows version (5.1.7). Anyway, the rule above helps either way.

    On the other hand, it might be better to prevent just undesired hyphenation.