Question

Say I have this html:

<div id="sidebar">
 TestTestTestTestTestTest
</div>
<div id="content">
 Content
</div>

And this CSS:

#sidebar {
 float:left;
 width:15%;    
 border:1px solid red;
}
#content {
 float:left;
    width:75%;
    border:1px solid green;
}

As you can see here , the content on the sidebar is going under the content container. How can I avoid that so that it would break a line and continue in the sidebar?

​

Answer 1

You can not manage text if there are no white spaces.

You can avoid at this issue adding the ellipsis on the #sidebar:

overflow: hidden;
text-overflow: ellipsis;

http://jsfiddle.net/t4rNp/3/