UI
遇到类似这样的布局，不用想，直接Flex一把梭。
没两下我们的dom结构就出来了：
<div class="wrapper">
<div class="left">
<div class="start">A.</div>
<div class="center">BCDEFGHIJKLMNOPQRST</div>
<div class="end">XYZ</div>
</div>
<!-- 右侧宽度不固定，但需要一行展示 -->
<div class="right">Some thing</div>
</div>
.wrapper {
display: flex;
align-items: center;
justify-content: space-between;
width: 300px;
background: #eee;
padding: 4px;
border-radius: 4px;
border: 1px solid #ddd;
}
.right {
flex-shrink: 0;
margin-left: 8px;
}
.left {
display: flex;
}
.start {
background: #ddd;
}
.center {
margin: 0 8px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.end {
background: #ccc;
}
结果
结果溢出了🤷♂️🤷♀️
想：
- “咦，好像哪里不对。没给
center设置宽度，肯定不能出现省略号呀！” - "那我怎么知道宽度是多少？，右侧内容不定宽啊！"
于是
.left {
display: flex;
width: 100%;
}
还是不行（100%那是真的傻）
再想：
- “既然右侧宽度是不被压缩固定的，那么使用
flex后左侧的宽度肯定也是固定的啊！“ - ”既然左侧宽度已知，那只要left不超过这个宽度或者超过隐藏，那么它子元素就一定会省略！“
于是
.left {
display: flex;
overflow: hidden;
}
成功.png
.left {
display: flex;
flex-basis: 0;
flex-grow: 1;
/* 以上两个可以偷懒用flex: 1 */
/* flex: 1; */
width: 0;
}
当然也成功啦！
这有份写好的代码，自己动手试试吧！
