省略号在flex容器中不起作用 [英] Ellipsis not working in flex container

问题描述

我有3个按钮（上一个，下一个，下一个，代表然后我有一些歌曲的信息（当前时间，歌曲名称和总时间），我是一直想要在同一行上。想要显示在按钮的右侧。

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

有没有人想法如何调整这个让它正常工作？

.wrapper {显示：flex; align-items：center;} ul {display：inline-block; list-style：none; flex-shrink：0;} li {display：inline-block;宽度：30px; height：30px;背景：红色; margin-right：3px;}。song-wrapper {background：beige;显示：flex; flex-grow：1;}。song-title {background：blue;白色空间：nowrap;溢出：隐藏;文本溢出：省略号; flex-grow：1;}

< div class = 包装 > < UL> <李>< /锂> <李>< /锂> <李>< /锂> < / UL> < div class =song-wrapper> <跨度→1：23℃; /跨度> < span class =song-title>这是歌曲标题，如果屏幕缩小，我希望它可以省略< / span> <跨度→4：22℃; /跨度> < / div>< / div>

$ b

https://jsfiddle.net/13ohs7jx/

解决方案解决方案

您已将 overflow：hidden 应用于 .song-title 。

它也需要在父级上：

  .song-wrapper {
 overflow：hidden; / *新* / 
背景：米色; 
 display：flex; 
 flex-grow：1; 
 
 
 
 $ b 
 
 
 <重写>  .wrapper {display：flex; align-items：center;} ul {display：inline-block; list-style：none; flex-shrink：0;} li {display：inline-block;宽度：30px; height：30px;背景：红色; margin-right：3px;}。song-wrapper {background：beige;显示：flex; flex-grow：1; overflow：hidden;}。歌曲标题{background：aqua;白色空间：nowrap;溢出：隐藏;文本溢出：省略号; flex-grow：1;}  

< div class = 包装 > < UL> <李>< /锂> <李>< /锂> <李>< /锂> < / UL> < div class =song-wrapper> <跨度→1：23℃; /跨度> < span class =song-title>这是歌曲标题，如果屏幕缩小，我希望它可以省略< / span> <跨度→4：22℃; /跨度> < / div>< / div>

$ b

修正小提琴

说明

$ b $ p .song-wrapper 和 .song-title 是弹性项目。 / p>

.song-wrapper 是主flex容器（ .wrapper < （code>）和 .song-title 是一个嵌套的弹性容器的子元素（ .song-wrapper ）。



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

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

$ b 虽然你有 overflow：hidden 应用于 .song-title ，您没有任何重写 min-width：auto on .song-wrapper 。

有关更详细的解释，请参阅此文章：

• 为什么flex项目收缩过去的内容大小？ a>

I'm trying to create a layout (which will be a music player) with flex.

I have 3 buttons (previous, play, and next, represented by the red squares) which I always want to be on the same line.

I then have some song info (current time, song title, and total time) that I want to display to the right of the buttons.

I pretty much always want the total time to be on the far right and for the song title to fill up the remaining width (with flex-grow), but to truncate with ellipsis as the window gets smaller.

Does anyone have any idea how to tweak this to get it to work properly?

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

解决方案

Solution

You have overflow: hidden applied to .song-title.

It also needs to be on the parent:

.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

Explanation

Both .song-wrapper and .song-title are flex items.

.song-wrapper is a child of the main flex container (.wrapper), and .song-title is a child of a nested flex container (.song-wrapper).

By default, a flex item cannot be smaller than the size of its content. A flex item's initial setting is min-width: auto. This means that the text in your flex item is setting the minimum width.

To override this setting you can use min-width: 0 or overflow: hidden.

Although you had overflow: hidden applied to .song-title, you didn't have anything overriding min-width: auto on .song-wrapper.

For a more detailed explanation see this post:

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

这篇关于省略号在flex容器中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！