Flexbox 影响溢出包装行为 [英] Flexbox affects overflow-wrap behavior

查看：28
本文介绍了Flexbox 影响溢出包装行为的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

看看这个片段.这是 overflow-wrap: break-word 应该如何工作:

.wrap{溢出包装:断字；}

<div class="a">第一个 div
<div class="b">动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物

现在看看如何结合 display:flex 来改变它的行为:

.wrap{溢出包装:断字；显示:弹性；}

<div class="a">第一个 div
<div class="b">动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物

如何编辑第二个片段以不显示水平滚动条?(不使用溢出:隐藏)

谢谢

解决方案

当您将 display: flex 赋予 wrap 时，默认情况下元素 a 和 b 在一行中弯曲.

现在 flexbox child 的另一个默认值是 min-width 属性默认为 auto，因此元素 a 和 b 需要一个 min-width 对应于它的内容.所以设置 min-width: 0 并且事情回到normal - 看下面的演示:

.wrap {溢出包装:断字；显示:弹性；}.b {最小宽度:0；/* 添加 */}

<div class="a">第一个 div
<div class="b">动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物动物

Look at this snippet. This is how the overflow-wrap: break-word should work:

.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>

And now see how change its behavior in combination with display:flex:

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

<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>

How to edit the second snippet to not showing horizontal scrollbar? (Without use of overflow: hidden)

Thanks

解决方案

When you give display: flex to the wrap, by default the elements a and b are flexed in a line.

Now another default of a flexbox child is the min-width property is auto by default and so the elements a and b takes a min-width corresponding to its content. So set min-width: 0 and things go back to normal - see demo below:

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

.b {
  min-width: 0; /* ADDED */
}

<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 影响溢出包装行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆