html - li元素溢出不隐藏

Question

我想做一个 li 元素来隐藏他的溢出内容，如果它比它的父级大的话。这个想法是在左边放一个标志，在中间放一个标题，在右边放一个栏。

这是我目前得到的，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>

jsfiddle 上蓝色的布局是现在的样子，黑色的布局是应该的样子。

如何使用当前布局做到这一点？

谢谢!

Answer 1

您需要向 li 元素添加一个 width 和一个 overflow:hidden 或者您可以使用 JavaScript/jQuery 裁剪文本并添加 "... ".