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

最新推荐文章于 2026-04-27 13:54:19 发布

原创最新推荐文章于 2026-04-27 13:54:19 发布 · 2.8k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端

收录于

这篇博客主要介绍了如何使用CSS解决侧栏导航菜单中文字超长溢出的问题，并处理了菜单在折叠状态下图标消失的bug。通过设置`display: flex`，调整`white-space`和`word-break`属性，以及添加动态样式来确保在菜单收起时图标依然可见。这种方法适用于有二级菜单的折叠侧栏。

换行

未做处理前

做完处理后

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代码完事