CSS - wymuszanie słów w nowej linii, a nie łamanie słów

Question

Mój klient nie chce, aby na jego stronie łamane były żadne słowa. Przykład:

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

POWINNA BYĆ

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

Problem pojawia się tylko w Safari. Czy ktokolwiek zna właściwość CSS, aby rozwiązać ten problem?

Answer 1

dodać regułę CSS

* { -webkit-hyphens: none; } 

Jedyne sytuacje, w których Safari dzielił wyraz (co dzieje się zgodnie z opisem), to wyraźna wskazówka dzielenia wyrazów, jak w przypadku to­wards lub automatyczne dzielenie wyrazów przez -webkit-hyphens: auto. Safari została opisana jako obsługująca automatyczne dzielenie wyrazów, ale wydaje się, że nie dotyczy to wersji Windows (5.1.7). W każdym razie powyższa reguła pomaga w dowolny sposób.

Z drugiej strony lepiej byłoby zapobiec nieplanowanemu oderwaniu od od.

Answer 2

Próbowałem to w Chrome i Safari i wydaje się działać zgodnie z oczekiwaniami:

white-space:pre-wrap; 

Przykład:

#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> 

Oto jsFiddle