Safari 浏览器中出现长单词的 CSS 网格错误

Question

我有两个具有相同宽度的两列的卡片的示例。 上卡是用flexbox实现的。下层卡片带有网格。 然而，在 Safari 中，网格示例将左列推至单词的宽度。

只有当我添加 word-break:break-word; 时，单词才会被换行。 为什么 Safari 对中断的处理方式不同？有解决办法吗？

.wrapper {
  width: 600px;
}

.flexcard {
  background-color: #e7e7e7;
  display: flex;
  padding: 1rem;
  margin-bottom: 1rem;
}

.flexcard > * {
    width: 50%;
}

.gridcard {
  background-color: #e7e7e7;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 1rem;
}

h2 {
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
font-size: 3rem;
}

.safari-fix {
  word-break: break-word;
}

<div class="wrapper" lang="de">
  <div class="flexcard">
    <h2>Wirstschaftswissenschaften</h2>
    <p>
      this is some Copytext. Lorem ipsum dolor sit amet.
    </p>
  </div>
  <div class="gridcard">
    <h2>Wirstschaftswissenschaften</h2>
    <p>
      this is some Copytext. Lorem ipsum dolor sit amet.
    </p>
  </div>
  <div class="gridcard">
    <h2 class="safari-fix">Wirstschaftswissenschaften</h2>
    <p>
      this is some Copytext. Lorem ipsum dolor sit amet.
    </p>
  </div>
</div>

Answer 1

而不是使用“word-break：break-word;”您可以使用“文本溢出属性” 它会剪切文本并显示省略号 (...) 或者您可以简单地使用自定义字符串。 （如果你不想省略号）

    white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

Answer 2

刚刚在 Safari 中进行了测试，一个简单的修复方法就是更改您的

grid-template-columns

，如下所示：

.gridcard {
  background-color: #e7e7e7;
  display: grid;
  grid-template-columns: 50% 50%;
  margin-bottom: 1rem;
}

或者更好地将其更改为

grid-template-columns: repeat(2, 50%)

，如果将来需要更改列数，它将更容易维护。

至于为什么，我不确定。可能是 Safari 中与网格、frs 或

-webkit-hyphens

相关的错误，也可能是 Safari 以其他浏览器无法做到的方式解释模糊的 CSS 规范。两者都经常发生，哈哈。如果有人知道具体原因，请评论，我会更新我的答案。

也就是说，如果可以的话，只使用

word-break: break-word

也可以。