[CSS]Flexbox and Truncated Text（译）_html/css_WEB-ITnose

原文：

Flexbox and Truncated Text

译文：Flexbox 遇上换行文本

当你遇到这样的情况：在一个 flex 子元素中有一个单行文本，你不想让文本自动换行，用省略号断行(或者隐藏其余的部分)。但意想不到的是，布局截断了并强制整个 flex 父元素变宽。利用 flexbox 可以让布局变得更容易！

有一种标准的解决方案，只需要使用 non-flexbox 属性值就可以完成。

我们想要的效果是这样的

这个动画展示了一个变窄后的子元素。

你会遇到的问题是这样的

这个动画展示了没换行的文本阻止了变窄。

子元素的问题

让人不解的是如果文本直接在 flex 子元素内，就会很好：HTML 代码：

Textto truncatehere.