文本溢出：省略号在嵌套的 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>

重要提示：要查看它是否正常工作，请最大化 sn-p 并缩小浏览器窗口以查看截断的文本。

如您所见，它运行良好。

在另一个弹性容器内

当我尝试将此组件放入另一个 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 添加到外部弹性项目（.content / demo）

或

将overflow: hidden 添加到外部弹性项目（.content / demo）

---

说明

弹性容器的初始设置是弹性项目上的min-width: auto。

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

在您的原始代码中，文本框（一个弹性项目）由于overflow: hidden 而变小。

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

Demo: When overflow: hidden is removed, first example behaves like second example.

在您的代码的第二个版本中，主要的弹性项目是 .side 和 .content。

默认情况下，.content 不能短于其内容（不管flex-shrink）...直到您用min-width: 0 覆盖min-width: auto，或者像第一个示例一样，应用overflow: hidden。

来自规范：

4.5. Implied Minimum Size of Flex Items

为了给弹性项目提供一个更合理的默认最小尺寸，这个 规范引入了一个新的auto 值作为初始值 CSS 2.1 中定义的min-width 和min-height 属性...read more

另一个例子见：Why doesn't flex item shrink past content size?

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>