关于display:flex碰上white-space nowrap 影响布局的问题
缘由:想用flex实现,右边固定,左边文字自适应,并自动换行。
问题:文字撑满不换行
布局效果如下图:
代码如下:
html
<div class="row flex"><div class="col-l">服务单号</div><div class="col-r flex justify-c-between"><div class="text">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div><div class="btn-copy">复制</div></div></div>
css
.flex {display: flex;}.justify-c-between {justify-content: space-between;}.btn-copy {padding: 2px 6px;border: 1px solid #333;border-radius: 8px;}.col-r {flex: 1;overflow: hidden;.text {flex: 1;word-break: break-word; /*重点加这句,换行*/}.btn-copy {flex: 0 0 108px;}}
修复效果:
小结
基础功荒废注意积累,有多久没写高质量的blog了?
参考资料:
/article/detial/2460
/weixin_4183/article/details/106415639
flex 布局 左侧固定右侧自适应 超出内容隐藏,并保证布局效果
做一个左边图片宽度固定,右边宽度自适应,使用到了flex布局,但是想让后面div里文字不换行,超出以点点表示时,这时布局就乱了,查了下,原来flex布局与white-space:nowrap有影响
解决办法,父div设置min-width:0即可
flex: 1;min-width: 0;
w3c上面是这样说的
By default, flex items won’t shrink below their minimum content size (the length of the longest word or fixed-size element).
因为设置了white-space:nowrap,所以content没法收缩了,设置0后就有了固定尺寸就可以收缩了