文字过长展示省略号且鼠标略过展示全部内容（不使用UI组件版）_css超出部分省略号,鼠标移上去显示

业务场景： 实际的页面开发过程中，很多时候都会出现文字过长，想展示省略号，且鼠标掠过展示全部内容的情况，大多数时间都会选择使用UI组件的tooltip或poptip

但其实也有很多时候，对于样式的要求不高，此时可以选择省时省力的办法，方法如下：

最终效果如下：

方式一、使用css

1、加入以下样式即可实现过长展示省略号效果

overflow: hidden; white-space: nowrap; text-overflow: ellipsis;

2、给对应的标签加上title，代码如下，即可实现业务场景所述效果

 <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" :title="value">{{value}}</div>
1

方式二、使用filter

1、vue项目写个filter函数，自定义默认展示最大长度

// 1、书写过滤函数
filter: {
  ellipsis (value) {
        if （value.length > 10）{
        	return value.slice(0,10) + '...'
        }
        return value;
    }
}
1
2
3
4
5
6
7
8
9

2、filter函数结合title使用

<div :title="value">{{ value | ellipsis }}</div>
1

end~