EL 菜单的文字如何自动换行

登录

本帖最后由听雨于 2025-3-6 14:57 编辑

EL菜单中的文字内容，如果太长（主要涉及到外文字符较长）就会使整个菜单的宽度很宽（以纵向菜单为例），影响主页面的大小（布局会出现滚动条）和整体的美观性。尤其是有二级或者三级菜单时。
这里设置了EL菜单的自适应宽度。但如果不设置，那么多余的文字又不显示（被截短）。

所以如何能让文字能自动换行？（当文字长度达到设定值就自动换行，且此文字所在菜单高度也随之自适应增加）

目前已添加了CSS来控制它的菜单高度和文字大小

.el-menu--horizontal.el-sub-menu__title {
font-size: 11px !important;
height: 37px !important;
}
.el-menu--horizontal.el-menu{
font-size: 11px !important;
height: 37px !important;
}
:root {
--el-menu-item-font-size: 11px !important;
--el-menu-item-height: 37px !important;
}

复制代码

Levi.Zhang · Levi.Zhang

本帖最后由 Levi.Zhang 于 2025-3-7 10:08 编辑

大佬，可以试试这个：
这边用红色框加了注释：可以自动换行和固定宽度（换行会自动向下新增一行，自适应）；如果还有高度需求可以使用height控制；
红色框的话大佬这边测试没问题后就可以删除掉了哦~

效果如下：

原：

Levi.Zhang · Levi.Zhang

大佬，固定大小也是一种办法，但是会有限制；可以试试这段CSS，允许在长单词或者连续字符处换行、调整行高和内边距：
.el-menu--horizontal .el-menu-item {
  white-space: normal;
  word-break: break-word;
  text-align: center;
  line-height: normal;
  padding: 10px;
}

效果如下：

听雨 · 听雨

Levi.Zhang 发表于 2025-3-6 15:55
大佬，固定大小也是一种办法，但是会有限制；可以试试这段CSS，允许在长单词或者连续字符处换行、调整行高 ...

加上没有效果。
因为EL菜单默认的单行文字的菜单高度太高，所以我使用上面的css代码进行设置。但是我想知道，能否同时实现：单行文字时，菜单高度是我css设置的高度，然后文字较长时，能自动换行，菜单高度自动变成2倍我设置的高度（2行文字的情况下），字号还是我css设置的字号。这样固定高度和自动换行是否有冲突呢？

Levi.Zhang · Levi.Zhang

本帖最后由 Levi.Zhang 于 2025-3-6 17:43 编辑

大佬，可能会导致冲突的哦，或者大佬可以再试试上面的对于长字符串的自动换行：

原：

加入后：

代码注释如下：

.el-menu--horizontal .el-menu-item {
  white-space: normal;
  /* 允许单词在必要时断开，以防止溢出 */
  word-break: break-word;
  /* 使菜单项文本居中对齐 */
  text-align: center;
  /* 让行高保持正常，确保内容居中对齐 */
  line-height: normal;
  /* 设置菜单项的内边距，提高可读性 */
  padding: 10px;
}

如果还不行话大佬可以提供下Demo吗？这边根据场景再看看有没有合适的方案呢~

听雨 · 听雨

Levi.Zhang 发表于 2025-3-6 17:42
大佬，可能会导致冲突的哦，或者大佬可以再试试上面的对于长字符串的自动换行：

原：

我想要单独控制纵向菜单的换行，横向的不用。这是DEMO，请帮忙看下如何解决。

听雨 · 听雨

Levi.Zhang 发表于 2025-3-7 09:45
大佬，可以试试这个：
这边用红色框加了注释：可以自动换行和固定宽度（换行会自动向下新增一行，自适应） ...

可以了。结合我之前的设置的CSS，现在能做到换行（且行高和字号符合要求），目前的行高（设定40px）仅能完全容纳2行文字，如果文字更长变成3行或更多行，那么行高依然不会自适应，文字会溢出与其它菜单文字重叠。

现在的情况基本也行了，2行也够了。

十分感谢！

Levi.Zhang · Levi.Zhang

不客气哈~
感谢您对活字格的支持！

		自动登录	找回密码
密码			立即注册

[已处理] EL 菜单的文字如何自动换行

最佳答案

7 个回复

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源