CSS-强迫单词到新行而不是破坏词

Question

我的客户希望他的网站上没有任何文字被破坏。例如：

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

应该

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

问题只出现在Safari中。有没有人知道CSS属性来解决这个问题？

Answer 1

添加CSS规则

* { -webkit-hyphens: none; }

Safari会连接单词的唯一情况（根据描述会发生的情况）是明确的连字符提示，如to­wards，或通过-webkit-hyphens: auto自动连字。 Safari已被描述为支持自动连字，但这似乎不适用于Windows版本（5.1.7）。无论如何，上述规则有助于两种方式。

另一方面，防止不受欢迎的连字符可能更好。

Answer 2

我在chrome和safari中尝试了这个，它似乎按预期工作：

white-space:pre-wrap;

示例：

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

以下是jsFiddle