如何实现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组件实现超出部分省略号的效果。

五、使用CSS动画实现省略号渐变

我们可以使用CSS3的动画效果，来实现省略号的渐变效果。

.el-tooltip__popper .el-tooltip__content{
  position: relative;
  animation: el-fade-up .3s;
  animation-fill-mode:both;
  -webkit-animation: el-fade-up .3s;
  -webkit-animation-fill-mode:both; 
}

@keyframes el-fade-up {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}