第一种方式：
调用方式：this.getEllipsis(value, 12)
下面的我是注入到了全局方法，所以这么写。
// value代表内容（value不能为空），num是限制我们多少字符进行显示省略号（num=20意思是不传默认是等于20）
Vue.prototype.getEllipsis = (value, num = 20) => {
if (!value) {
return ''
}
if (value.length > num) {
return value.slice(0, num) + '...'
}
return value
}
第二种方式：
第一种方式存在问题：不区分中英文，我们需要不同的条件需要展示不同的。（当然我现在想到的办法就是判断该字符是否中文或英文然后不同条件不同判断）
.custom-file-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 300px;
}
第一种思路：主要是根据长度，内容长度超出就显示…
第二种思路：主要是根据宽度，内容宽度超出就显示…
最后的效果都是一样的。
谢谢阅览，希望能帮助到你们。有不懂的欢迎评论区留言。