Flexbox 和截断文本

情况：您在 flex 子元素中有一行文本。 您不希望该文本换行，而是希望将其截断并显示省略号（或回退到仅隐藏溢出）。 但最糟糕的事情发生了。 难以置信！ 布局中断并迫使整个 flex 父元素也变得过宽。 Flexbox 应该帮助使布局变得更容易！

幸运的是，有一个（标准化的）解决方案。 您只需要使用非 flexbox 属性/值即可。

我们想要什么

潜在问题

这不仅可能阻止容器变窄，还可能使容器变得非常宽。

子元素（flex 子元素的）是问题所在

稍微有点混乱……如果手头的文本直接位于 flex 子元素内，则一切正常

<div class="flex-parent">
  <div class="flex-child">
    Text to truncate here.
  </div>
  <div class="flex-child">
    Other stuff.
  </div>
</div>

/* Text is directly within flex child,
   so doing the wrapping here */
.flex-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

当存在子元素时，就会出现问题，例如

<div class="flex-parent">
  <div class="flex-child">
    <h2>Text to truncate here.</h2>
  </div>
  <div class="flex-child">
    Other stuff.
  </div>
</div>

/* Text is a header now,
  so need to truncate there for it to work */
.flex-child > h2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

解决方案是在 flex 子元素上使用min-width: 0;

或min-width设置为某个实际值。 没有这个，包含其他文本元素的 flex 子元素将不会缩小到这些文本元素的“隐含宽度”以下。

当我第一次遇到这个问题时，我通过AJ Foster 的一个 Pen找到了解决方案。 他写道

根据草案规范，当 flex 容器大小调整变小时，上述文本不应完全折叠。 因为 .subtitle 的宽度为 100%，所以 flexbox 进行的 min-width: auto 计算表示其容器应该比我们想要的更大。

我发现这种行为在 Chrome、Opera 和 Firefox 中是一致的。 Safari 即使没有 min-width 也会缩小/截断（我认为违反了规范）。

演示

查看 Pen 关于 flexbox 你必须知道的事情，作者 Chris Coyier (@chriscoyier) 在 CodePen 上发布。

1. 有效：文本直接位于 flex 子元素内部
2. 失效：文本位于 flex 子元素内的<h2>中
3. 有效：文本位于<h2>中，但在 flex 子元素上设置了min-width