gpt4 book ai didi

css - Safari flexbox 文本换行问题

转载 作者:技术小花猫 更新时间:2023-10-29 10:38:48 24 4
gpt4 key购买 nike

我发现了 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 的已知问题,或者我是否应该报告该错误?

最佳答案

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

关于css - Safari flexbox 文本换行问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57651769/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com