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

lbool 发布于2019-04-23 11:44 / 2790人阅读

背景，做一个前面图片宽度固定，后面宽度自适应，使用到了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后就有了固定尺寸就可以收缩了

记录走过的路，踩过的坑，互勉。

　　前端交流群：87709616

有不同意见的可以留言，我们一起讨论。

转载至：https://segmentfault.com/q/1010000011466651/a-1020000011490454

云服务器 GPU云服务器布局遇到的问题关于javascript的问题关于php的问题关于系统错误的问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1097.html

flex布局遇到white-space:nowrap怎么超出一行显示省略号

摘要：后两个属性可选，该属性有两个快捷值和。属性定义了项目的缩小压缩比例，默认为，即如果空间不足，该项目将缩小。属性定义了在分配多余空间之前，项目占据的主轴空间。当我们设置，项目控件由于不能计算多余的空间导致无法收缩了。写在最前：当flex遇到white-space:nowrap，你知道怎么破局吗？切图带你分析原理，三个方案任意选择！一、场景： showImg(https://segm...

tylin 2019-08-30 15:44 评论0 收藏0
display: flex;’布局下使用‘white-space: nowrap;’导致的问题

摘要：需求在中实现布局预期效果为左侧一个正圆形的用户头像，右侧的上方为该用户昵称下方为个性签名单行显示，超出实际能显示的最大宽度则用代替。解决办法在的父布局中添加样式即可解决。需求：在item中实现布局预期效果为：左侧一个正圆形的用户头像，右侧的上方为该用户昵称、下方为个性签名（单行显示，超出实际能显示的最大宽度则用‘...’代替）。如图： showImg(https://segment...

waruqi 2019-08-02 16:17 评论0 收藏0
display: flex;’布局下使用‘white-space: nowrap;’导致的问题

摘要：需求在中实现布局预期效果为左侧一个正圆形的用户头像，右侧的上方为该用户昵称下方为个性签名单行显示，超出实际能显示的最大宽度则用代替。解决办法在的父布局中添加样式即可解决。需求：在item中实现布局预期效果为：左侧一个正圆形的用户头像，右侧的上方为该用户昵称、下方为个性签名（单行显示，超出实际能显示的最大宽度则用‘...’代替）。如图： showImg(https://segment...

caspar 2019-08-30 10:51 评论0 收藏0
自适应宽度元素单行文本省略用法探究

摘要：单行文本省略和元素及其父元素的属性都无关元素或为元素内单行文本省略，需要给元素或为元素添加样式为元素的子元素如果是自适应宽度时，内的子元素实现单行文本省略，需要给添加样式单行文本省略是现代网页设计中非常常用的技术，几乎每个站点都会用到。单行文本省略适用于显示摘要信息的场景，如列表标题、文章摘要等。在响应式开发中，自适应宽度元素单行文本省略容易失效不起作用，对网页开发这造成困扰。因此，本文将要...

K_B_Z 2019-04-23 13:46 评论0 收藏0