我的客户希望他的网站上没有被打断的单词。例如:
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属性吗?
我的客户希望他的网站上没有被打断的单词。例如:
The dog went for a walk and ran to-
wards the car.
应该是
The dog went for a walk and ran
towards the car.
添加CSS规则
* { -webkit-hyphens: none; }
根据描述,Safari仅在以下情况下将单词断开(也就是按照描述的情况发生):显式连字符提示,例如to­wards
,或通过-webkit-hyphens: auto
自动连字号。Safari被描述为支持自动连字号,但似乎不适用于Windows版本(5.1.7)。无论如何,以上规则都有帮助。
另一方面,最好只是防止不必要的连字。
我在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。