el-menu标题过长显示不全问题处理

项目基于vue-element-admin

问题

期望

处理方式

\src\layout\components\Sidebar\index.vue 文件后添加CSS

<style scped>
/* 侧栏导航菜单经典 文字超长溢出问题 CSS折行 */
.el-submenu__title {
     
  display: flex;
  align-items: center;
}
.el-submenu__title span {
     
  white-space: normal;
  word-break: break-all;
  line-height: 20px;
  flex: 1;
  padding-right: 20px;
}

.el-menu-item {
     
  display: flex;
  align-items: center;
  padding-right: 20px !important;
}
.el-menu-item span {
     
  white-space: normal;
  word-break: break-all;
  line-height: 20px;
  flex: 1;
}
/* 动态样式 控制收起时icon图标 */
.packUp .el-submenu__title .svg-icon {
     
  margin-right: 0% !important;
}
</style>