多行文本溢出省略中间部分的实现
业务中碰到一个省略中间的文本溢出处理需求,搜索了许久的资料,没有发现相关解决方法,所以在此记录一下。一开始想要用css实现,最终发现只能实现常见的单行或多行的尾部省略效果,所以采用 js 来实现。因为项目中多采用 vue 的框架,便一同实现了自定义指令方便使用。思路:根据字体大小、元素宽度和显示的行数计算元素可容纳字数总量,然后截取原始文本超出部分并插入省略号实现:Vue.directive('ellipsis', { bind: function (el, binding) { c
原创
2021-07-31 07:34:51 ·
532 阅读 ·
0 评论