flex布局中text-overflow：ellipsis失效1 问题描述
HTML：
<div id="container">
<span class="box">
<p>box1</p>
</span>
<span class="box">
<p>box222222222222222222</p>
</span>
</div>
CSS：
#container{
display: flex;
width: 300px;
outline: 1px solid #aaa;
}
.box{
flex: 0 0 150px;
outline: 1px solid lightpink;
}
/* 单⾏显⽰，溢出显⽰。。。 */
.box p{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
结果：box2中的内容溢出了，没有显⽰省略号
2 解决⽅法
先说解决⽅法： 给 .box 添加 min-width:0;
效果：
3 分析
3.1 概念+原理
为了⽅便描述，先定义⼀个概念 —— 原始⼤⼩ ：flex item 被放进⼀个flex容器之前的⼤⼩。
⼀个 flex item 元素的 原始⼤⼩ 是怎么确定的？
优先级：flex-basis > width > 内容宽度。
min-width 和 max-width会限制住 原始⼤⼩ 。
“Basically: flex items will refuse to shrink below their minimum intrinsic width, unless you explicitly specify “min-width” or “width” or “max-width” on them.”
举个例⼦，元素的 max-width 设置为 100px ， flex-basis 设置为 200px ，那么 原始⼤⼩ 是 100px
flex item元素的 min-width 默认是 auto
参考：
stackoverflow：
掘⾦：
html的flex布局简书：
3.2 回头看我们的问题
给 box2 设置的 flex-basis 是 150px，所以原始⼤⼩的值是150px ，但是受 min-width 限制。
min-width 默认是 auto ，那么这个 auto 是多少呢？
flex布局，⽽且内部不允许换⾏，这⾥min-width 的auto 就是⽂字不换⾏长度（没有查到资料，是根据页⾯效果反推出来的）min-width => 默认值 auto => ⽂字不换⾏时的长度 => 长，⼤于150px 。所以， box2 的宽度被撑开了。
3.3 设置不同min-width的效果：
box2 的 flex-basis 是150px
min-width 在 0~150px 之间时，box的最终宽度都是150px
min-width ⼤于150ox 时，box的最终宽度是 min-width 的值。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。