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>