解决el-menu标题过长显示不全问题
作者：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标题显示不全内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！