最新公告  | 
  • CTRL + D 加入收藏不迷路哦!

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

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

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

使用Flexbox和text-ellipsis实现文本省略

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

使用Flexbox和text-ellipsis实现文本省略

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

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

技巧是使用属性min-width,根据Flexbox规范:

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

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

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

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » CSS 实现文件名中部截取并显示省略号…效果

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发