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

Question

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

6

我的客户希望他的网站上没有被打断的单词。例如：

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

- Eric Holmes

@Andy，“break-word”在行末不会引入连字符。 - Jukka K. Korpela

2个回答

1

我在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。

- Ulises

1

预格式化文本与避免单词分割的请求非常不同。 - Jukka K. Korpela

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jukka K. Korpela · Accepted Answer

添加CSS规则

* { -webkit-hyphens: none; }

根据描述，Safari仅在以下情况下将单词断开（也就是按照描述的情况发生）：显式连字符提示，例如towards，或通过-webkit-hyphens: auto自动连字号。Safari被描述为支持自动连字号，但似乎不适用于Windows版本（5.1.7）。无论如何，以上规则都有帮助。

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