我有两个例子，一张卡片有两个相同宽度的列。上层卡采用flexbox实现。下层卡有网格。但是，在Safari中，格缐范例会将左栏推到单字的长度。
仅当我添加断字时：断字;，字是包着的。为什么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;
}个字符
2条答案
按热度按时间nbysray51#
而不是使用“断字：断字;你可以使用“text-overflow property”来裁剪文本并显示一个省略号（...）或者你可以简单地使用自定义字符串。（如果不需要省略号）
字符串
5jdjgkvh2#
刚刚在Safari中测试过，一个简单的修复方法是像这样更改
grid-template-columns：字符串
或者更好的方法是将其更改为
grid-template-columns: repeat(2, 50%)，如果将来需要更改列数，则更易于维护。至于为什么，我不确定。可能是Safari中与网格或frs或
-webkit-hyphens相关的错误，也可能是Safari以其他浏览器无法做到的方式解释模糊的CSS规范。这两种情况都经常发生。如果有人知 prop 体原因，请评论，我会更新我的答案。也就是说，如果可以的话，只使用
word-break: break-word也可以。