Flexbox弹性布局中的文本省略号实现

<div class="filename">
  <span class="filename__base">this-file-has-a-really-really-really-long-filename.</span>
  <span class="filename__extension">pdf</span>
</div>

.filename {
  display: flex;
  min-width: 0;
}

.filename__base {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.filename__extension {
  flex-shrink: 0;
}

省略号效果可以通过text-overflow，white-space和overflow属性组合来实现。

Flexbox弹性布局中的文本省略号实现技巧是使用属性min-width:0。根据Flexbox规范：

Note: The auto keyword, representing an automatic minimum size, is the new initial value of the min-width and min-height properties. The keyword was previously defined in this specification, but is now defined in the CSS Sizing module.

…

In general, the content-based minimum size of a flex item is the smaller of its content size suggestion and its specified size suggestion.

注意：表示自动最小大小的auto关键字是minwidth和minheight属性的新初始值。关键字以前在本规范中定义，但现在在CSS调整模块中定义。
…
通常，基于内容的flex项目的最小大小是其内容大小建议和指定大小建议中较小的一个。

通过使用min-width: 0，我们更改了flexbox容器的最小尺寸，这将调整不使用该flex-shrink属性的容器的子元素的大小。由于filename__base元素有text-overflow，white-space和overflow属性，所以省略号才能正确显示。