CSS 实现文件名中部截取并显示省略号…效果

最近，我被要求构建一个包含用户上传的文件列表的表。设想一个类似于 Finder 中的文件列表的表：

表中第二项完整文件名是mobile-phone-screenshot-long-fine-name.png，但列不够大，无法显示完整的文件名。相反，我们看到的是mobile-phone-sc...g-fine-name.png。在这个项目中，我们决定剪掉部分文件名结尾，保留扩展名，如上图所示：

接下来我们看看具体实现代码，

HTML 代码：

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

CSS 代码：

.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属性来实现，但是，我们仍然需要弄清楚文件名基与其父文件名之间的关系，后者也包含文件扩展名。

技巧是使用属性 min-width，根据 Flexbox 规范：

注意：表示自动最小大小的 auto 关键字是 min-width 和 min-height 属性的新初始值。关键字以前在本规范中定义，但现在在 CSS 调整模块中定义。

…

通常，基于内容的 flex 项目的最小大小是其内容大小建议和指定大小建议中较小的一个。

通过使用min-width:0，我们更改了 flexbox 容器的最小尺寸，这将调整不使用该flex-shrink属性的容器的子元素的大小。由于 filename 基元素具有text-overflow,white-space和overflow属性，因此省略号将正确呈现。