参考

element ui的el-tree文字显示不全的问题

问题描

在项目中使用element-ui前端UI框架来构建前端界面时，使用el-tree组件实现树形菜单，遇到当节点文字过长会出现显示不全的问题；

解决方法

1.隐藏超出的文字，显示省略号，并添加title树形

css样式：

.show-ellipsis {
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

image.png

2.设置横向滚动条

重置样式，并设置横向滚动条：

.el-tree {
  width: 100%;
  height: 100%;
  overflow-x: scroll;
  overflow-y: scroll;
}

.el-tree>.el-tree-node {
  display: inline-block !important;
  width:100%;
}