在web開發中，我們經常遇到這種情況，當文本內容超出部分被省略號代替，以便更好的展示內容。本文將從多個方面詳細闡述如何實現elementui超出後省略號的效果。
一、使用CSS樣式實現省略號
CSS樣式的text-overflow屬性可以實現超出部分的省略號效果。
.el-tooltip__popper,
.el-select-dropdown__list,
.el-autocomplete-suggestion,
.el-cascader-menu{
max-width: 400px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
二、使用javascript截斷字元串
我們可以通過JavaScript截取超出部分的字元串，並在末尾添加省略號。
function truncateString(str, num) {
if (str.length <= num) {
return str;
} else {
return str.slice(0, num) + "...";
}
}
truncateString("Hello World", 5);
三、使用Vue指令簡化實現
在Vue開發中，我們可以使用自定義指令來實現elementui超出後省略號。
Vue.directive('ellipsis', {
inserted: function (el) {
el.style.overflow = 'hidden';
el.style.textOverflow = 'ellipsis';
el.style.whiteSpace = 'nowrap';
}
});
四、使用elementui中的el-tooltip實現
在elementui組件庫中，我們可以使用el-tooltip組件實現超出部分省略號的效果。
這裡是超出部分
原創文章，作者：GERVK，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/334327.html
微信掃一掃 
支付寶掃一掃 