技術標籤：前端必知htmljscssweb

第一種方式：
呼叫方式：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;
}

第一種思路：主要是根據長度，內容長度超出就顯示…
第二種思路：主要是根據寬度，內容寬度超出就顯示…

最後的效果都是一樣的。

謝謝閱覽，希望能幫助到你們。有不懂的歡迎評論區留言。