使侧边栏菜单变宽会导致在切换菜单时出现问题，因为宽度保持不变(Keenthemes Metronic)
我正在开发一个angular web应用程序。添加了Keenthemes Metronic侧边栏。有些菜单文本太长，并且与其他元素重叠。我知道我可以通过执行以下操作来解决此问题：
text-overflow: ellipsis;但我想完整地显示菜单标题。因此，我想扩展菜单，使文本适合。我尝试了各种宽度内容样式，但它不起作用。我还尝试在侧边栏和标题部分(折叠按钮)设置一个固定的宽度，这很有效。但这引入了一个新的问题。当单击折叠按钮时，宽度保持不变，并阻止侧边栏折叠。
我曾尝试查找Keenthemes Metronic文档，但未获成功。有人知道我该如何解决这个问题吗？
可以在此处看到侧栏：https://preview.keenthemes.com/metronic-v4/theme/admin_1/layout_sidebar_menu_light.html
我可以通过设置宽度使侧边栏更宽，例如：
width: 280px;这为所有菜单标题提供了足够的空间，这正是我想要的。
但当我点击迷你菜单切换按钮时，它无法切换菜单，因为菜单的宽度固定在280px。
回答 3
Stack Overflow用户
发布于 2020-10-25 06:02:03
非常简单，您需要内联(使用空格: nowrap)并隐藏最后一个字符(使用overflow:隐藏)：
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;Stack Overflow用户
发布于 2020-10-29 01:51:27
当您通过切换按钮关闭侧边栏时，它会将类page-sidebar-menu-closed添加到ul。不幸的是，这在DOM中太低了，我们不能很容易地处理CSS。
但是，它还会更改body的类
打开：
<body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white" ...已关闭：
<body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white page-sidebar-closed" ...因此，在宽度上，您只需要指定它不适用于侧边栏的“关闭”版本：
body:not(.page-sidebar-closed) div.page-sidebar {
width: 180px;
}或者，您可以采用另一种方式，在侧边栏关闭时将宽度设置回来：
div.page-sidebar {
width: 180px;
}
body.page-sidebar-closed div.page-sidebar {
width: 45px;
}Stack Overflow用户
发布于 2021-07-04 21:18:47
找到解决方案了！不幸的是，我不得不在文件"theme\assets\layouts\layout\css\layout.min.css“中全局地将" width :235px”替换为我想要的宽度(270px
https://stackoverflow.com/questions/64518246
复制相似问题
腾讯云开发者
