display:flex布局下white-space:nowrap失效问题解决

文字长度过长显示省略号的样式设置方法众所周知：

h3 {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}

然而有一次，我在项目中用到white-space: nowrap的时候，发现它失效了，我的项目是flex布局，宽度自适应的部分，white-space: nowrap撑开了内容区的长度，省略号是显示了，但是父元素的自适应宽度完全不对了。

页面部分布局如下：

<template><div class="parent"><el-col :span="6" v-for="item in list" :key="item.id"><h3>{{ item.title }}</h3>......</el-col></div>
</template>

样式如下：

 .parent {flex: auto;min-height: 100vh;display: flex;flex-direction: column;}.parent h3 {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
}

查了一下才知道，原来是因为display:flex影响的，white-space:nowrap会影响flex布局下未设定宽度的元素，所以给设置了display:flex的父元素设置一下min-width: 0;即可解决问题。

.parent {flex: auto;min-height: 100vh;display: flex;flex-direction: column;min-width: 0;
}

display:flex布局下white-space:nowrap失效问题解决相关推荐

弹性盒子模型中`display:flex`布局下`white-space:nowrap`失效问题
文字长度过长显示省略号的样式设置方法众所周知:  .css {white-space: nowrap;overflow: hidden;text-overf ...
css不换行省略号没作用,flex布局下，css设置文本不换行时，省略号不显示的解决办法...
大致是有一个 main 容器是 flex 布局,左边一个 logo 固定宽高,右边 content 动态宽度. a name a info Lorem ipsum dolor sit amet, co ...
flex布局下文字超出省略号代替不起作用解决方法
项目中发现,在flex布局下,希望目标元素文字超出省略号时,text-overflow: ellipsis属性无效,结论是设置文字超出省略号的元素,然后网上找了一圈设置父元素width: 0.over ...
微信小程序布局display flex布局介绍
display flex是什么? 微信小程序最近火的不要不要的,下载开发工具测试了一下,小程序对css支持很好, 布局使用display flex布局火力强大,不太了解或者对flex布局比较生疏的童靴 ...
Flex布局下,文字超出省略号显示无效解决方案
默认的flex布局下的标题文字超出后省略号显示无效解决办法: 在flex:1的盒子中,设置overflow: hidden; 或 width: 0;即可. <div class=" ...
Safari浏览器display: flex布局错乱，Chrome布局正确
Safari浏览器display: flex布局错乱,Chrome布局正确 display: flex; align-items: center; justify-content: end; chro ...
display:flex 布局教程
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 一.Flex布局是什么? Flex ...
display flex布局
目录 calc()语法 column 列(兼容性一般般,用的较少) Flex 布局 justify-content属性 align-items 交叉轴 flex-direction属性 flex-wr ...
html flex布局换行,flex布局下换行兼容问题
最近使用flex布局大体上都没问题,就是一些版本都存在一点兼容问题尤其是换行的时候,我们来看下面的Less 文件! 各大浏览器兼容都写好了!但是还是存在换行问题 ,看列子 .flex-block() ...

display:flex布局下white-space:nowrap失效问题解决

display:flex布局下white-space:nowrap失效问题解决相关推荐

最新文章

热门文章