侧边导航栏el-menu 文字溢出问题 CSS一键解决

换行 

未做处理前

 

做完处理后

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>

做好之后 如果你的侧栏有折叠收起功能并且有二级菜单 那么你会发现你的icon消失了 我做的处理是加了动态样式  然后写一行css代码完事

效果图