时间戳

首页 > 解决方案 > Safari flexbox 文本换行问题

css - Safari flexbox 文本换行问题

问题描述

我发现 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 的一个已知问题，或者我是否应该报告这个错误？

标签： csssafariflexboxword-wrap

解决方案

我想答案比我想的要简单得多：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;
}

推荐阅读