css -webkit-hyphens:如果宽度设置为自动,则自动在Safari中不起作用

u2nhd7ah  于 2023-06-25  发布在  其他
关注(0)|答案(1)|浏览(217)

我有一个h3元素,我不知道它的宽度。因此宽度为auto-默认值。但我希望里面的文字有连字。它与第二个元素一起位于柔性容器中。柔性容器具有固定宽度。这适用于所有浏览器,Safari除外。在那里连字根本就不起作用。文本溢出并将第二个元素推出 Package 。在Safari中,只有当我将h3元素的宽度设置为特定值时,它才能工作,例如width: 300pxwidth: 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运行?

jk9hmnmh

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

相关问题