Hide text of title in sidebar collapse in AdminLTE

Question

In AdminLTE theme when I collapse sidebar it hides menu title under pull-right-container icon. Please check following image for a clear idea.

Error Image

Is it possible to have it on a new line?

Here is my code:

<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

Just add style="padding-right: 50px;white-space: normal;" in the span tag :

<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>

I can able to achieve the solution exactly