Safari中hyphens属性报错“不支持的属性名”问题求助

问题根源 #

Safari对标准hyphens属性的支持存在滞后，必须搭配WebKit私有前缀-webkit-hyphens才能识别；同时它的连字逻辑和Chrome/Firefox存在差异，会忽略未加前缀的hyphens: none全局规则，导致连字符被错误应用。

修正后的CSS代码 #

body {
  hyphens: none;
  -webkit-hyphens: none; /* 适配Safari */
}

@media screen and (max-width: 342px) {
  h1, h2 {
    word-break: break-word;
    hyphens: auto;
    -webkit-hyphens: auto; /* 适配Safari */
    overflow-x: hidden;
  }
}

额外注意事项 #

• 确保HTML根元素（<html>）设置了正确的lang属性，比如<html lang="en">，hyphens属性依赖对应语言的词典，缺失lang属性可能导致Safari连字行为异常。
• 若仍有问题，可尝试在全局规则中给所有元素显式设置-webkit-hyphens: none，避免部分继承规则干扰：

  * {
    hyphens: none;
    -webkit-hyphens: none;
  }
  

内容的提问来源于stack exchange，提问作者Freja