在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/n/334327.html
微信扫一扫 
支付宝扫一扫 