Safari flexbox 文本换行问题

Posted 2023-03-06

【中文标题】Safari flexbox 文本换行问题

【英文标题】：Safari flexbox text wrapping issue

【发布时间】：2019-12-30 06:47:10

【问题描述】：

我发现 Safari (OS X) 存在问题： https://codepen.io/alexlouden/pen/jONyZKb

document
  .querySelectorAll('.parent')
  .forEach(el => 
    el.addEventListener("mouseover", event => 
      event.target.style.color = 'blue';
    )
  )

* 
  box-sizing: border-box;

.parent 
  display: flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  padding: 32px;
  background-color: #e99;
  margin: 32px;
  text-align: center;

.child 
  flex: 1;
  max-width: 100%;
  background-color: #99e;

.grandchild 
  overflow-wrap: break-word;
  border: 1px dotted black;

<div>
  In Safari, when you hover on the red area the XXXs will stop wrapping. <br/>
  Hover over the blue area and it will fix and re-wrap.
</div>

<div class="parent">
  <div class="child">
    <div class="grandchild">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
    </div>
  </div>
</div>
<div class="parent">
  <div class="child">
    <div class="grandchild">
Centered
    </div>
  </div>
</div>

grandchild 似乎不遵守 child 的最大宽度约束，但仅在修改父项样式时 - 而不是在第一次加载时。

我想知道是什么导致了这种行为，以及这是否已经是 Safari 的一个已知问题，或者我是否应该报告这个错误？

【问题讨论】：

您没有尝试将孩子设置为flex: 1; max-width: 100%，而是尝试了完整的 flex 等效项？删除这两行并尝试flex: 0 1 100%。

@Michael_B 感谢您的想法！我刚刚尝试了flex: 0 1 100%、flex: 1 0 100%（还有flex-basis: auto 只是为了很好的衡量），但它们都不会导致文本换行：imgur.com/a/0R23FpR。似乎让文本完全换行的唯一方法是添加min-width、width 或max-width，但它们似乎都容易受到上述错误的影响！

您在.child 上尝试过min-width: 0？

@Michael_B 是的，恐怕是 - 不走运！抱歉延迟回复！

【参考方案1】：

我想答案比我想象的要简单得多 ':D !!

只需更改以下 css，它应该可以工作 B)

.parent 
  display: flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  padding: 32px;
  background-color: #e99;
  margin: 32px;
  text-align: center;
  overflow-wrap: break-word;

【讨论】：

您好 Prajyot，感谢您的回答！我认为您的回答没有触发错误的原因是您只修改了 .grandchild 而不是 .parent 的样式 - 因此不会重新计算父样式。 （如果您将 JS 更改为 $(this).css(，则可以看到这一点）。在我的真实应用中，父样式正在被修改，这会导致布局问题，所以恐怕我需要一个根本不修改 JS，只修改 CSS 的解决方案！

啊，感谢您的更新 - 将 overflow-wrap 添加到父级似乎有效！多么奇怪！再次感谢您！