填坑之路：Flex布局超长省略

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;
}

当然也成功啦！

这有份写好的代码，自己动手试试吧！