首页 > web前端 > css教程 > 正文

为什么在 Flexbox 容器中使用时,'overflow-wrap:break-word”不能按预期工作?

Mary-Kate Olsen
发布: 2024-11-02 10:04:30
原创
872 人浏览过

Why doesn't `overflow-wrap: break-word` work as expected when used within a flexbox container?

Flexbox 影响 Overflow-Wrap 行为

问题:

在下面的代码中,为什么溢出换行属性与 display: flex 结合使用时,行为不符合预期?

.wrap {
  overflow-wrap: break-word;
}

<div class="wrap">
  <div class="a">first div</div>
  <div class="b">
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal
    animal animal animal animal animal animal animal animal animal animal animal animal
  </div>
</div>
登录后复制

答案:

当你将 display: flex 添加到wrap元素时,它就变成了一个flexbox容器。默认情况下,Flexbox 容器内的元素在一行中对齐。然而,flexbox 子元素的 min-width 属性默认设置为 auto,导致它们占据容纳其内容所需的最小宽度。

在提供的代码中,这意味着元素 a 和 b 是拉伸以适应其内容。由于元素 b 的文本内容很长,因此会强制出现水平滚动条。

要解决此问题,可以将元素 b 的最小宽度设置为 0。这将允许其缩小以适应其内容并消除水平滚动条。

.wrap {
  overflow-wrap: break-word;
  display: flex;
}

.b {
  min-width: 0;
}

<div class="wrap">
  <div class="a">first div</div>
  <div class="b">
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal
    animal animal animal animal animal animal animal animal animal animal animal animal
  </div>
</div>
登录后复制

以上是为什么在 Flexbox 容器中使用时,'overflow-wrap:break-word”不能按预期工作?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!