CSS-强制单词换行而不是分词答案

【问题标题】：CSS- force words to new line rather than word-breakingCSS-强制单词换行而不是分词
【发布时间】：2012-12-20 14:10:41
【问题描述】：

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

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 属性？

【问题讨论】：

@Andy, break-word 从不在行尾引入连字符。

标签： css safari line-breaks word-break

【解决方案1】：

添加 CSS 规则

* { -webkit-hyphens: none; }

Safari 对单词进行连字的唯一情况（根据描述会发生这种情况）是显式连字提示，如 to&shy;wards 或通过自动连字通过 -webkit-hyphens: auto。 Safari 被描述为支持自动断字，但这似乎不适用于 Windows 版本（5.1.7）。无论如何，以上规则对任何一种方式都有帮助。

另一方面，最好只防止不需要的连字符。

【讨论】：

谢谢你，我不知道 WebKit 会自动断字！
这是问题的原因！谢谢尤卡！

【解决方案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

【讨论】：

预格式化文本与避免分词的请求有很大不同。