省略号在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

解

你overflow: hidden申请了.song-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;
}

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

修改过的小提琴

说明

这两个.song-wrapper和.song-title是柔性的项目.

.song-wrapper是主要flex容器(.wrapper).song-title的子代,并且是嵌套的flex容器(.song-wrapper)的子代.

默认情况下,弹性项目不能小于其内容的大小.弹性项目的初始设置是min-width: auto.这意味着Flex项目中的文本正在设置最小宽度.

要覆盖此设置,您可以使用min-width: 0或overflow: hidden.

虽然你已经overflow: hidden应用到.song-title,你也没有什么压倒一切min-width: auto的.song-wrapper.

有关更详细的说明,请参阅此帖子:

• 为什么flex项目不会缩小内容大小？