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属性，因此省略号将正确呈现。

以上关于CSS 实现文件名中部截取并显示省略号…效果的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。