Bootstrap-treeview overflow indentation

Question

i have a bootstrap treeview where the text is too long to fit on one line. The text does flow to the next line, however the indentation only applies to the first line, not the second. See screenshot of Current situation

What i want to reach is the next screenshot some paint job

Anyone have any idea how to reach this?

Answer 1

I have wraped the text inside the "li" element into a span element that contains the class node-label, then css will do the job:

    
    /*
        Align text in the consequent lines as well
    */
    .node-label {
        display: flex;
    }
    .node-tree > [class="icon glyphicon"] {
        display: none !important;
    }
    .list-group-item {
        display: flex !important;
    }

this is an example on how the list needs be structured

<li class="list-group-item node-tree" data-nodeid="13" style="color:undefined;background-color:undefined;">
<span class="indent"></span>
<span class="indent"></span>
<span class="icon glyphicon"></span>
<span class="icon node-icon"></span>
<span class="node-label">Graduate Programs With Rotations</span>
</li>