垂直菜单长文本适配需求：取消省略号并实现瀑布式宽度自适应

当前垂直菜单文本过长时会显示为省略号（...），想要实现类似横向菜单的瀑布式效果——文本过长时自动扩展菜单宽度，避免内容被截断。尝试直接复用横向菜单的样式类后，页面布局出现错乱。

当前效果 #

文本过长时被截断显示为省略号的垂直菜单样式

期望效果 #

参考横向菜单逻辑，菜单宽度随文本长度自适应扩展，完整显示所有内容

精简后的HTML代码 #

<body class="vertical-layout vertical-menu 3-columns   fixed-navbar" data-open="hover" data-menu="vertical-menu" data-col="3-columns">

    <nav class="header-navbar navbar-expand-md navbar navbar-with-menu fixed-top navbar-semi-light bg-gradient-x-grey-blue" style="background-color: #414042 !important">
        <div class="navbar-wrapper" style="background-color: #2e1846 !important">
            <div class="navbar-header" style="background-color: #2e1846 !important">
                <ul class="nav navbar-nav flex-row">
                    <li class="nav-item mobile-menu d-md-none mr-auto"></li>
    [...]
</ul>
            </div>
            <div class="navbar-container content">
                <div class="collapse navbar-collapse" id="navbar-mobile" style="/*padding-top:15px;*/">
                    <ul class="nav navbar-nav mr-auto float-left">
                        <li class="nav-item d-none d-md-block">
[...]
</li>
                    </ul>
    </div>
            </div>
        </div>
    </nav>

 <div class="main-menu menu-fixed menu-light menu-accordion menu-shadow expanded" data-scroll-to-active="true" style="touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
        <div class="main-menu-content">
<ul class="navigation navigation-main" id="main-menu-navigation" data-menu="menu-navigation">
                <li class=" navigation-header">
                    <i class=" feather icon-minus" data-toggle="tooltip" data-placement="right" data-original-title="General"></i>
                </li>

                <li class="nav-item">
                    <a href="#" id="navbarDropdown">
                        <i class="fa fa-home"></i>
                        <span class="menu-title" data-i18n="Accueil">
                            @Lst.Where(x => x.ID == "278").FirstOrDefault().Text <!--Accueil-->
                        </span>
                    </a>
                    <ul class="menu-content">

                        <li>

                            <a class="menu-item" href="/Home/Index" id="Accueil" data-i18n="Accueil">
                                &nbsp;&nbsp;
                                @Lst.Where(x => x.ID == "278").FirstOrDefault().Text <!--Accueil-->
                            </a>
                        </li>
                        <li>
                            <a class="menu-item" href="#" data-i18n="Mes suivis">
                                &nbsp;&nbsp;
                                @Lst.Where(x => x.ID == "1613").FirstOrDefault().Text <!--Mes suivis-->
                            </a>
                        </li>
                        <li>
                            <a class="menu-item" href="#" data-i18n="Notes des candidats">
                                &nbsp;&nbsp;
                                @Html.Raw(Lst.Where(x => x.ID == "1614").FirstOrDefault().Text) <!--Notes des candidats-->
                            </a>
                        </li>
                    </ul>
                </li>

1. 移除文本截断规则 #

找到垂直菜单中控制文本省略的CSS，移除或覆盖以下属性：

.menu-title, .menu-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

替换为允许完整显示内容的规则：

.menu-title, .menu-item {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

2. 取消菜单容器固定宽度约束 #

修改垂直菜单容器的宽度设置，使其自适应内容：

.main-menu, .main-menu-content, .navigation-main {
    width: auto;
    min-width: 200px; /* 保留最小宽度避免菜单过窄 */
}

3. 修复子菜单布局错乱 #

调整子菜单的定位方式，避免脱离文档流导致布局异常：

.menu-content {
    position: relative;
    width: 100%;
}

4. 适配父级布局约束 #

如果页面整体布局限制了菜单宽度，覆盖相关规则：

.vertical-layout .main-menu {
    flex-basis: auto;
    max-width: none;
}

内容的提问来源于stack exchange，提问作者FrankLar21