看看这个片段。这就是如何overflow-wrap: break-word
应该管用:
.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{
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>
如何编辑第二个片段以不显示水平滚动条? (不使用溢出:隐藏)
Thanks
当你给予display: flex
to the wrap
,默认情况下的元素a
and b
are flexed在一条线上。
现在另一个默认的弹性盒子孩子 is the min-width
财产是auto默认情况下,所以元素a
and b
需要一个min-width
与其内容相对应。这样设置min-width: 0
事情又回到了normal- 请参阅下面的演示:
.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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)