关于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了？

参考资料：

http://www.fly63.com/article/detial/2460

https://blog.csdn.net/weixin_41832017/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后就有了固定尺寸就可以收缩了

flex布局右列固定左列自适应，遇到white-space nowrap 影响布局超长的问题相关推荐

一个三行两列右列固定左列自适应宽度的CSS
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-/ ...
[html] 写一个左中右的满屏布局，左右固定220px,中间自适应并且要优先加载
[html] 写一个左中右的满屏布局,左右固定220px,中间自适应并且要优先加载 <!DOCTYPE html> <html lang="en"> < ...
[css] 使用flex实现三栏布局，两边固定，中间自适应
[css] 使用flex实现三栏布局,两边固定,中间自适应同意里面的一个回答,现在有很多简单的实现方式,传统的这个也是一种hack的方式,真的没必要去追究了,但是核心知识点可以掌握.1.把 cent ...
[html] 写一个三栏布局，中间固定，两边自适应（平均）
[html] 写一个三栏布局,中间固定,两边自适应(平均) <style>html,body {height: 100%;margin: 0;padding: 0;}.container ...
[html] 写一个三栏布局，两边固定，中间自适应
[html] 写一个三栏布局,两边固定,中间自适应 position + marginfloat + marginflex 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很 ...
CSS(一) 经典布局（两边固定，中间自适应）的五种方式
两边固定,中间自适应本篇总结五种思路实现方式, 圣杯布局圣杯布局,方便理解是带有两只耳朵的奖杯,耳朵跟奖杯是一体,所以左右两边跟中间同级,但是content在上面第一步:中间盒子100%,两边固 ...
三栏布局：左右固定，中间自适应的几种方式
1.flex布局(强烈推荐) 实现方式:左右两栏设置宽度,中间栏设置 flex:1,占满余下部分 <!DOCTYPE html> <html lang="en"& ...
CSS || 三栏布局，两边固定，中间自适应
1 float实现基于纯float实现的三栏布局需要将中间的内容放在HTML结构的最后,否则右侧会沉在中间内容的下侧原理:元素浮动后,脱离文档流,后面的元素受浮动影响,设置受影响元素的margin ...
三栏布局（两边固定，中间自适应）
大家理解起来应该没有什么困难,其实三栏式布局和两栏式是相同的,下面我讲一个最简单的三栏布局制作方法. DivCss布局二--三栏布局来源:黄超 [点击放大] 请看上面的图片,只将上篇文章中的图片变成 ...

flex布局右列固定左列自适应，遇到white-space nowrap 影响布局超长的问题

关于display:flex碰上white-space nowrap 影响布局的问题

flex布局右列固定左列自适应，遇到white-space nowrap 影响布局超长的问题相关推荐

最新文章

热门文章