我有两个例子,一张卡片有两个相同宽度的列。上层卡采用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
也可以。