解决el-menu标题过长显示不全问题

更新时间：2023年12月12日 09:54:34 作者：itCatface

本文主要介绍了如何解决el-menu标题过长显示不全问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,感兴趣的朋友们跟着小编来一起学习学习吧

问题

期望

处理方式

\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>

到此这篇关于解决el-menu标题过长显示不全问题的文章就介绍到这了,更多相关el-menu标题显示不全内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue中的面包屑导航组件实例代码
这篇文章主要介绍了vue的面包屑导航组件，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-07-07
vxe-list vue 如何实现下拉框的虚拟列表
这篇文章主要介绍了vxe-list vue 如何实现下拉框的虚拟列表，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
面试问题Vue双向数据绑定原理
这篇文章主要介绍了面试问题Vue双向数据绑定原理，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-09-09
详解VueRouter 路由
本文详细介绍了VueRouter 路由的概念、规则、基础等相关内容，文中运用大量的图片进行讲解，感兴趣的小伙伴可以看一看这篇文章
2021-08-08
Vue项目中引入外部文件的方法（css、js、less）
本篇文章主要介绍了Vue项目中引入外部文件的方法（css、js、less），非常具有实用价值，需要的朋友可以参考下
2017-07-07
在vue中created、mounted等方法使用小结
这篇文章主要介绍了在vue中created、mounted等方法使用小结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vuejs移动端实现div拖拽移动
这篇文章主要为大家详细介绍了vuejs移动端实现div拖拽移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
vue实现纯前端表格滚动分页加载
这篇文章主要为大家详细介绍了vue实现纯前端表格滚动分页加载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
vue-loader中引入模板预处理器的实现
这篇文章主要介绍了vue-loader中引入模板预处理器的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
微信小程序用户盒子、宫格列表的实现
这篇文章主要介绍了微信小程序用户盒子、宫格列表,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07