在 AdminLTE 的侧边栏折叠中隐藏标题文本

Question

在 AdminLTE 主题中，当我折叠边栏时，它会将菜单标题隐藏在 pull-right-container 图标下。请查看下图以获得清晰的思路。

Error Image

是否可以换行？

这是我的代码：

<aside class="main-sidebar">
<section class="sidebar" style="height:auto">
    <ul class="sidebar-menu tree" style="white-space: normal" data-widget="tree">
        <li class="treeview menu-open" style="white-space: normal">
            <a href="#">
                <i class="fa fa-circle-o"></i>
                <span>Demo Test Demo Test </span>
                <span class="pull-right-container">
                    <i class="fa fa-angle-left pull-right"></i>
                </span>
            </a>
        <ul class="treeview-menu" style="display: block;">
            <li>
                <a href="#">
                    <div style="width:100%;display:inline-block">
                        <div style="width:10%;float:left;padding-top: 5px;">
                            <i class=" fa fa-arrow-circle-right"></i> 
                        </div>
                        <div style="width:90%;float:right">
                            This is a test
                        </div>
                    </div>
                </a>
            </li>
        </ul>
        </li>
    </ul>
</section>

Answer 1

只需在 span 标签中添加 style="padding-right: 50px;white-space: normal;" ：

<section class="sidebar" style="height:auto">
    <ul class="sidebar-menu tree" style="white-space: normal" data-widget="tree">
        <li class="treeview menu-open" style="white-space: normal">
            <a href="#">
                <i class="fa fa-circle-o"></i>
                <span style="padding-right: 50px;white-space: normal;">Demo Test Demo Test </span>
                <span class="pull-right-container">
                    <i class="fa fa-angle-left pull-right"></i>
                </span>
            </a>
        <ul class="treeview-menu" style="display: block;">
            <li>
                <a href="#">
                    <div style="width:100%;display:inline-block">
                        <div style="width:10%;float:left;padding-top: 5px;">
                            <i class=" fa fa-arrow-circle-right"></i> 
                        </div>
                        <div style="width:90%;float:right">
                            This is a test
                        </div>
                    </div>
                </a>
            </li>
        </ul>
        </li>
    </ul>
</section>

我完全可以实现解决方案

在 AdminLTE 的侧边栏折叠中隐藏标题文本

Hide text of title in sidebar collapse in AdminLTE

html

css

sidebar

adminlte