弹性盒子模型中`display:flex`布局下`white-space:nowrap`失效问题

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

<!-- 单行显示省略号 -->
.css {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}<!-- 多行显示省略号 -->
.css2 {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;text-overflow: ellipsis;overflow: hidden;
}

然而在弹性盒子模型中发现在添加white-space: nowrap;属性后，宽度自适应部分失效了，导致过长的文本撑开了布局，进而布局撑出了屏幕外。虽然省略号显示了，但是父元素的自适应宽度完全失效了。

经过搜索排查分析，发现是display: flex;影响的white-space: nowrap;会影响flex布局下未设定宽度的元素，所以给设置了display: flex;的父元素设置一下min-width:0即可解决问题。

代码如下：

.item-content-container { //父display: flex;flex: 1;flex-direction: column;box-sizing: border-box;padding: 32rpx 0 32rpx 0rpx;border-bottom: 1px solid $color_border_divider;min-width: 0;  //处理因white-space: nowrap  导致宽度失效的问题.content { //子// display: flex;  //这里需要注释掉box-sizing: border-box;font-size: $text_size_24;color: $color_text_primary;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
}

本文参考：https://blog.csdn.net/Flowering_Vivian/article/details/110377201

弹性盒子模型中`display:flex`布局下`white-space:nowrap`失效问题相关推荐

display:flex布局下white-space:nowrap失效问题解决
文字长度过长显示省略号的样式设置方法众所周知: h3 {white-space: nowrap;overflow: hidden;text-overflow: ellipsis; } 然而有一次,我在 ...
css不换行省略号没作用,flex布局下，css设置文本不换行时，省略号不显示的解决办法...
大致是有一个 main 容器是 flex 布局,左边一个 logo 固定宽高,右边 content 动态宽度. a name a info Lorem ipsum dolor sit amet, co ...
微信小程序---弹性盒子模型
1.弹性盒子布局弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为 ...
flex弹性盒子模型
目录 1.弹性盒子模型可以以任意父容器为flex模型 2.他的布局位置可以在父容器中或在自身属性中 3.flex布局的优点 1.弹性盒子模型可以以任意父容器为flex模型 2.他的布局位置可以在父容器 ...
css3的弹性盒子模型,css3弹性盒子模型——回顾。
1.box-flex属性规定框的子元素是否可伸缩其尺寸. 父元素必须要声明display:box;子元素才可以用box-flex. 语法:box-flex:value; 示例: .test_box { ...
css3弹性盒子模型之box-flex
css3弹性盒子模型之box-flex 浏览器支持目前没有浏览器支持 box-flex 属性. Firefox 支持替代的 -moz-box-flex 属性. Safari.Opera 以及 Chr ...
弹性盒子模型属性之flex-grow
在学习弹性盒子模型的时候,有几个属性常常让同学们感觉头痛, 不知到最后得到的效果数值到底是怎样计算得来的,那么不要慌,稳住,我们能赢 !!! 今天就让我们先来看看flex-grow这个属性 flex- ...
微信小程序布局display flex布局介绍
display flex是什么? 微信小程序最近火的不要不要的,下载开发工具测试了一下,小程序对css支持很好, 布局使用display flex布局火力强大,不太了解或者对flex布局比较生疏的童靴 ...
Flex布局下,文字超出省略号显示无效解决方案
默认的flex布局下的标题文字超出后省略号显示无效解决办法: 在flex:1的盒子中,设置overflow: hidden; 或 width: 0;即可. <div class=" ...

弹性盒子模型中`display:flex`布局下`white-space:nowrap`失效问题

弹性盒子模型中`display:flex`布局下`white-space:nowrap`失效问题相关推荐

最新文章

热门文章