当前位置：Gxlcms > html代码 > [CSS]FlexboxandTruncatedText（译）_html/css_WEB-ITnose

[CSS]FlexboxandTruncatedText（译）_html/css_WEB-ITnose

时间：2021-07-01 10:21:17 帮助过：38人阅读

原文：

Flexbox and Truncated Text

译文：Flexbox 遇上换行文本

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

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

我们想要的效果是这样的

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

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

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

  Textto truncatehere.

Otherstuff.

CSS 代码：

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

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

HTML 代码：

  Textto truncatehere.

Otherstuff.

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

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

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

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

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