前端正确处理“文字溢出”的思路

文章预览

点击上方  程序员成长指北 ，关注公众号 回复 1 ，加入高级Node交流群 前言： 最近在项目中需要做到类似于 Mac 下这种，当屏幕宽度足以容下当前文件名称的时候，文件名称全部展示，不做省略。 然而当用户缩放浏览器显示的尺寸时，我们需要做到省略中间的文字，选择保留后缀这种方案。如下图所示： 我个人也是感觉这个方案是最好的，因为大部分情况下，用户更关心的是这个文件的类型，而后缀名的保留往往是最佳的选择。我个人也查阅了很多相关文章，并且借鉴了一些已有轮子的代码思路，实现了一个符合我们项目中需求的一个组件。 一.组件效果预览 单行文字溢出时自动省略，并且 不保留 后缀。 单行文字溢出时自动省略，并且 保留 后缀。 多行文字溢出时，然后再开始省略。这个情况是我们项目中比较特殊的场景。简单来说就是假 ………………………………