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

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

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

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

HTML代码：

this-file-has-a-really-really-really-long-filename.

pdf

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