css - 为什么这些词会在奇怪的地方中断？

Question

这是现场网站：http ://chadfraser.com/

如您所见，如果您在移动设备上查看或缩放浏览器窗口，单词会在奇怪的地方中断。我可以添加连字符，但我的客户是专业作家并且不想要它们。不过，我们不应该需要它们——我不明白为什么这些词不能用空格包裹。

任何想法将不胜感激。

Answer 1

这是因为您的代码正在分配word-wrap: break-word;它会导致单词在必要时分成两半。

最准确地说，它是在第 51 行的styles.css 中设置的：

body {
    word-wrap: break-word;
    ...

因此，您的整个文档将像这样运行。将属性设置为word-wrap: normal您不想破坏的元素，或者只是从正文中删除此属性