Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 556
Eric Holmes Avatar asked Dec 20 '12 14:12

Eric Holmes


1 Answers

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.

like image 54
Jukka K. Korpela Avatar answered Sep 30 '22 14:09

Jukka K. Korpela