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

Question

我正在尝试使用 flex 创建一个布局(这将是一个音乐播放器)。

我有 3 个按钮(上一个、播放和下一个，用红色方 block 表示)我总是希望它们在同一行。

然后我有一些歌曲信息(当前时间、歌曲标题和总时间)我想显示在按钮的右侧。

我几乎总是希望总时间在最右边，让歌曲标题填满剩余的宽度(使用 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>

revised fiddle

解释

.song-wrapper 和.song-title 都是 flex 元素。

.song-wrapper 是主 flex 容器 (.wrapper) 的子项，.song-title 是嵌套的 flex 容器 (.song-wrapper)。

默认情况下， flex 元素不能小于其内容的大小。 flex 元素的初始设置是 min-width: auto。这意味着您的 flex 元素中的文本正在设置最小宽度。

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

尽管您将 overflow: hidden 应用于 .song-title，但您没有任何覆盖 min-width: auto 的内容.song-wrapper.

更详细的解释请看这篇文章:

• Why doesn't flex item shrink past content size?