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

原文：

Flexbox and Truncated Text

译文：Flexbox 遇上换行文本

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

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

我们想要的效果是这样的

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

你会遇到的问题是这样的

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

子元素的问题

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

<divclass="flex-parent">  <divclass="flex-child">Textto truncatehere.  </div>  <divclass="flex-child">Otherstuff.  </div></div> 

CSS 代码：

/* 文本直接在子元素中，在这里换行 */.flex-child  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;} 

当遇到子元素，就会出问题：

HTML 代码：

<divclass="flex-parent">  <divclass="flex-child"><h2 id="Textto-truncatehere">Textto truncatehere.</h2>  </div>  <divclass="flex-child">Otherstuff.  </div></div> 

CSS 代码：

/* 标题文本的时候，可以截断文本 */.flex-child > h2 {  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;} 

解决方案：在 flex 子元素上设置 min-width: 0

或者把 min-width 改成其他具体数值。不这样的话包含其他文本元素的 flex 子元素就不会让这些文本元素的”隐含宽度”变窄了。

当我第一次碰到这样的情况的时候，我在 AJ Foster 那边找到了解决方法，他写道：

根据一项 规范草案 ，上面文本不应该当 flex 容器减小时，完全折叠。因为子标题已经有了 100% 的宽度， min-width: auto 会计算 flexbox 会使得容器比我想的要大。

我发现 Chrome、Opera 和 Firefox 都有这个特性。而 Safari 会收缩、截断，即使没有设置 min-width （可能是违背了规范）。

Demo

Codepen 上的 Demo 地址： http://codepen.io/chriscoyier/pen/zqedEr

1. 生效的：文本框直接在 flex 子元素中；
2. 无效的：文本框在 h2 内的 flex 子元素中；
3. 生效的：文本框在 h2 ，但 flex 子元素设置了 min-width 。