text-overflow:省略号不在嵌套的Flex容器中工作

Question

我有一个由按钮旁边的文本组成的组件.如果没有足够的空间,文本必须缩小并切断.像这样:

.container .box {
  background-color: #efefef;
  padding: 5px;
  border: 1px solid #666666;
  flex: 0 0 auto;
}

.container .text {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.container {
  display: flex;
}

<div class="container">
  <div class="text">This is a text that is supposed to get truncated properly when needed.</div>
  <div class="box">Hello</div>
</div>

重要提示:要查看它是否有效,请最大化代码段并缩小浏览器窗口以查看文本截断.

它可以正常工作,你可以看到.

在另一个弹性容器内

当我尝试将此组件放在另一个Flex容器中时出现问题.

我的页面包含一个固定的侧面区域,右侧的剩余部分可以调整剩余的空间.我的组件必须适合第二部分,所以我把它放在那里:

.container .box {
  background-color: #efefef;
  padding: 5px;
  border: 1px solid #666666;
  flex: 0 0 auto;
}

.container .text {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.container {
  display: flex;
}

.main {
  display: flex;
}

.main .side {
  width: 100px;
  background-color: #ff9900;
  flex: 0 0 auto;
}

.main .content {
  flex: 1 1 auto;
}

<div class="main">
  <div class="side"></div>
  <div class="content">
    <div class="container">
      <div class="text">This is a text that is supposed to get truncated properly when needed.</div>
      <div class="box">Hello</div>
    </div>
  </div>
</div>

在第二种情况下,文本不会缩小.我正在使用Chrome,但在其他浏览器中看起来也是一个问题.

Answer 1

解

添加min-width: 0到外部flex项目(.content/ demo)

要么

添加overflow: hidden到外部flex项目(.content/ demo)

说明

Flex容器的初始设置是min-width: auto在flex项目上.

这意味着弹性项目不能小于其内容的大小.

在原始代码中,文本框(弹性项)因此而变小overflow: hidden.

如果没有该规则,您将具有与第二个示例相同的行为.

演示:overflow: hidden删除后,第一个示例的行为类似于第二个示例.

在代码的第二个版本中,主要Flex项目是.side和.content.

默认情况下,.content不能短于其内容(无论如何flex-shrink)...直到您min-width: auto使用min-width: 0或覆盖,或者像第一个示例一样,应用overflow: hidden.

从规格:

4.5.隐含的最小Flex项目大小

为Flex项目进行更合理的默认最小大小,该规范引入了一个新auto值的初始值min-width,并min-height在CSS 2.1定义的属性... 阅读更多

有关另一个示例,请参阅:为什么Flex项目不会缩小到内容大小？

Answer 2

使用width属性来处理overflow

注意:宽度应为px

.container .box {
  background-color: #efefef;
  padding: 5px;
  border: 1px solid #666666;
  flex: 0 0 auto;
}
.container .text {
  flex: 1 1 auto;
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.container {
  display: flex;
}
.main {
  display: flex;
}
.main .side {
  width: 100px;
  background-color: #ff9900;
  flex: 0 0 auto;
}
.main .content {
  flex: 1 1 auto;
}

<div class="main">
  <div class="side"></div>
  <div class="content">
    <div class="container">
      <div class="text">This is a text that is supposed to get truncated properly when ndgsdgeeded.</div>
      <div class="box">Hello</div>
    </div>
  </div>
</div>