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裁剪文本并添加“...”。

Answer 2

有很多方法可以得到你想要的东西。我建议您查看CSS Float Layouts的一些示例。

如果您有相关信息，最简单的方法是在您的＆＃34;非常大的标题＆＃34;和width添加overflow:hidden; white-space:nowrap;。也许是text-overflow。

如果您想保证您的＆＃34;我的徽标在这里＆＃34;一直显示在左侧，您需要给它一个固定的宽度，并给它的邻居（<nav>）一个宽度相同的margin-left。

您可以使用类似的策略来确保左/右浮动对不重叠。如果你同时给他们width: 50%，他们就不会重叠。或者提供一个width: calc(100% - 100px);和另一个width: 100px。这只适用于这两个浮动元素可以访问其父级的全宽，并且没有正的水平边距。取消浮动一个可能是最容易的，并给另一个固定的宽度。

...或者您可以使用javascript来布局页面。这听起来像你在做什么。无论如何，最好远离噩梦，即CSS布局。

李元素溢出不隐藏

2 个答案: