Elad Benda Elad Benda - 16 days ago 5
Javascript Question

Text overflow outside of parent div

I cannot understand how to avoid text overflow like this:
enter image description here

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

You can play with the text-overflow css attribute.

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