Question

I cannot understand how to avoid text overflow like this:

My markup:

<div class="sidebar">
                <div class="well">
                    <span class="folders_icons">
                        <a id="add_folder" name="add_folder">
                        <img src= "Images/Browser/add.JPG" title="add folder" /></a>
                        <a id="remove_folder" name="remove_folder">
                        <img src="Images/Browser/delete.JPG" title="remove folder" /></a>
                        <a id="rename_folder" name="rename_folder">
                        <img src="Images/Browser/rename.JPG" title="rename folder" /></a>
                    </span>
                    <h5>My Folders</h5>
                    <div id="jstree"></div>
                </div>
            </div>

Answer 1

You can play with the text-overflow css attribute.

#jstree {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

• http://www.quirksmode.org/css/textoverflow.html