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

Question

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?

Downstate

@Andy, break-word never introduces a hyphen at the end of a line. – Gourde

Answer 1

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.

Gourde

Thank you for this, I had no idea WebKit was doing auto-hyphenation! – Mcknight

This was the cause of the issue! Thanks Jukka! – Downstate

Answer 2

I tried this in chrome and safari and it seems to work as expected:

white-space:pre-wrap;

Example:

#noBroeknWords
{
 white-space:pre-wrap;
}

<div style="width:400px">
    <span id='noBroeknWords'>
    LongWord, ShouldNotBeBroken ShouldNotBeBroken ShouldNotBeBroken ShouldNotBeBroken ShouldNotBeBroken ShouldNotBeBrokenShouldNotBeBroken  ShouldNotBeBrokenShouldNotBeBroken ShouldNotBeBrokenShouldNotBeBroken.
    </span>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div>

Here is the jsFiddle

Labia

Preformatted text is quite different from the request to avoid word division. – Gourde