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

最新推荐文章于 2024-04-13 17:12:19 发布

itCatface

最新推荐文章于 2024-04-13 17:12:19 发布

阅读量873

点赞数 10

分类专栏： Web_基础知识文章标签： vue elementui

本文链接：https://blog.csdn.net/itCatface/article/details/134850401

版权

Web_基础知识专栏收录该内容

7 篇文章 0 订阅

订阅专栏

项目基于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>