Các từ bắt buộc CSS thành dòng mới thay vì từ vi phạm

Question

Khách hàng của tôi không muốn từ nào bị phá vỡ trên trang web của mình. Ví dụ:

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

NÊN BE

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

Vấn đề này chỉ xuất hiện trong Safari. Có ai biết thuộc tính CSS để giải quyết vấn đề này không?

Answer 1

Thêm quy tắc CSS

* { -webkit-hyphens: none; } 

Các tình huống duy nhất mà Safari sẽ gạch nối một từ (đó là những gì xảy ra theo mô tả) là một gợi ý gạch nối rõ ràng, như trong to­wards hoặc qua dấu gạch nối tự động qua -webkit-hyphens: auto. Safari đã được mô tả là hỗ trợ gạch nối tự động, nhưng điều này dường như không áp dụng cho phiên bản Windows (5.1.7). Dù sao, quy tắc trên cũng giúp ích cho cả hai cách.

Mặt khác, tốt hơn hết là ngăn chặn chỉ dấu gạch ngang không mong muốn.

Answer 2

tôi đã cố gắng này trong Chrome và Safari và có vẻ như để làm việc như mong đợi:

white-space:pre-wrap; 

Ví dụ:

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

Đây là jsFiddle