我有一个h3元素,我不知道它的宽度。因此宽度为auto
-默认值。但我希望里面的文字有连字。它与第二个元素一起位于柔性容器中。柔性容器具有固定宽度。这适用于所有浏览器,Safari除外。在那里连字根本就不起作用。文本溢出并将第二个元素推出 Package 。在Safari中,只有当我将h3元素的宽度设置为特定值时,它才能工作,例如width: 300px
或width: 80%
,但正如我之前提到的,我不能这样做。当我删除display: flex
时,它也可以工作,但我也不想这样做。
下面是一个简短的例子来展示这个问题:
.card {
display: flex;
align-items: flex-start;
border: 1px solid #ddd;
width: 200px;
}
h3 {
flex: 1;
background: #ff5604;
hyphens: auto;
-webkit-hyphens: auto;
}
button {
display: inline-block;
}
<html lang="de">
<head>
</head>
<body>
<div class="card">
<h3>Versicherungsmaklerbüro/Versicherungsmaklerinnenbüro</h3>
<button>
Button
</button>
</div>
</body>
</html>
有没有一种纯CSS的方法来让Safari运行?
1条答案
按热度按时间jk9hmnmh1#
默认情况下,h3元素是块级元素。这意味着它默认有100%的宽度,即父容器的100%宽度,在你的例子中,它是200 px。这样,连字符将正常工作,如您所期望的,h3的内容显然大于200 px,因此您将看到应用的连字符。
现在,您将.card元素设置为显示为flexbox,这意味着所有直接子元素都成为flex-items。弹性项有不同的默认属性,技术上它不再是一个块级元素了。弹性项的宽度默认等于内容的长度。最初它不关心父元素的宽度。所以200 px在这里没有帮助。为了使flex-item采用父元素的100%宽度,您必须直接指定它。在你的例子中,你必须告诉元素使用width:100%强制它打破内容并适合父容器空间。
Flex项目大小调整遵循以下特定公式:content -> width -> flex-based。更多详情请参见this great article.
正如您所看到的,这实际上不是Safari错误,而是您使用的规则/规则组合的意外结果。