elementUI后台管理系统左侧菜单文字过长,如何换行展示?

elementUI做的后台管理系统,左侧菜单栏文字太长了,
菜单栏宽度已经定了,不能再调宽了,整体会很不好看,现在想让过长的菜单栏文字换行展示,有什么方法吗?我写的css没有效果:
word-break
word-wrap

阅读 12k
4 个回答

你写的css不生效主要原因是因为他设置了white-space: nowrap(文本不进行换行),把他重置成normal默认值就好了。
在ele文档上模拟了一下你可能要的样式,你看看。2020123-110050.jpg

文字换行? 正常来讲文字是会自动换行的 数字或者字母会用word-break来调整让他换行
看一下是不是加了省略号的样式 如果加了可以去掉然后看下高度 如果高度固定可能会看不见
当然建议你给菜单加个Tooltip 这样高度就不用调整 可能看起来会好一些

.el-menu-item {
   word-break: break-all;
   white-space: break-spaces; 
}

再调一下line-height

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题