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

css safari line-breaks word-break
Eric Holmes picture Eric Holmes · Dec 20, 2012 · Viewed 7.1k times · Source

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?

Answer

Jukka K. Korpela picture Jukka K. Korpela · Dec 20, 2012

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.

Related questions

How to remove the border highlight on an input text element

When an HTML element is 'focused' (currently selected/tabbed into), many browsers (at least Safari and Chrome) will put a blue border around it. For the layout I am working on, this is distracting and does not look right. <…

Read More
is there a css hack for safari only NOT chrome?

im trying to find a css hack for just safari NOT chrome, i know these are both webkit browsers but im having problems with div alignments in chrome and safari, each displays differently. i have been trying to use this …

Read More
How can I force WebKit to redraw/repaint to propagate style changes?

I have some trivial JavaScript to effect a style change: sel = document.getElementById('my_id'); sel.className = sel.className.replace(/item-[1-9]-selected/,'item-1-selected'); return false; This works fine with the latest versions of FF, Opera and IE, but …

Read More