我有一个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错误，而是您使用的规则/规则组合的意外结果。