省略号在flex容器中不起作用

Question

我正在尝试用flex创建一个布局（将是一个音乐播放器）。

我有3个按钮（上一个、播放和下一个，用红色方块表示），我总是希望它们在同一条线上。

然后，我想在按钮右侧显示一些歌曲信息（当前时间、歌曲标题和总时间）。

我几乎总是希望总时间在最右边，歌曲标题填满剩余的宽度（使用flex grow），但随着窗口变小，用省略号截断。

有人知道如何调整它以使其正常工作吗？

.wrapper {
  display: flex;
  align-items: center;
}
ul {
  display: inline-block;
  list-style: none;
  flex-shrink: 0;
}
li {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: red;
  margin-right: 3px;
}
.song-wrapper {
  background: beige;
  display: flex;
  flex-grow: 1;
}
.song-title {
  background: blue;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
}

<div class="wrapper">
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div class="song-wrapper">
    <span>1:23</span>
    <span class="song-title">This is the song title and I want it to ellipsize if the screen shrinks</span>
    <span>4:22</span>
  </div>
</div>

https://jsfiddle.net/13ohs7jx/

Answer 1

你有溢出：隐藏应用到. son-title。

它还需要位于父级上：

.song-wrapper {
   overflow: hidden; /* NEW */
   background: beige;
   display: flex;
   flex-grow: 1;
}

.wrapper {
  display: flex;
  align-items: center;
}
ul {
  display: inline-block;
  list-style: none;
  flex-shrink: 0;
}
li {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: red;
  margin-right: 3px;
}
.song-wrapper {
  background: beige;
  display: flex;
  flex-grow: 1;
  overflow: hidden;
}
.song-title {
  background: aqua;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
}

html prettyprint-override"><div class="wrapper">
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div class="song-wrapper">
    <span>1:23</span>
    <span class="song-title">This is the song title and I want it to ellipsize if the screen shrinks</span>
    <span>4:22</span>
  </div>
</div>