Q:

Li element overflow does not hide

I want to make a li element to hide his overflow content if it is bigger than its parent. The idea is to put a logo on the left, a title the middle and a bar at the right.
This is what I got so far, http://jsfiddle.net/J5nqm/ 
<div class="container" style="color:blue;">
    <div style="float: left;">My logo here</div>
    <nav>
        <ul style="float:none; clear:all; list-style: none; ">
            <li style="position: relative; float: left; display: inline; margin-left:15px;">
                This is a really big title, its so big that breaks all my layout! How can I make this li element to hide its overflow if needed?
            </li>
            <li style="float:right; display: inline;">
                Right message bar
            </li>
        </ul>
    </nav>
</div>

The layout in blue on the jsfiddle is how its now, and the layout in black is how it should be.
How its possible to do this with the current layout?
Thanks!

A:

You need to add a width and a overflow:hidden to the li element or you can use JavaScript/jQuery to crop the text and add the "...".

