css – 文本溢出省略号不适用于动态宽度

希望有人能帮忙。

我有3个嵌套div。父母，子女和子女。

我想要完成的(动机是不相关的)是，该小孩获得相对宽度取决于父的宽度(一个百分比)，孩子的孩子必须有一个溢出省略号取决于该宽度。问题是，如果我使用一个％的孩子的宽度，省略号不起作用，如果我定义宽度的像素，它的工作。

这是HTML

<div class="a">
   <div class="b">
        <div class="c">
        Here should go some text long enough to ellipsis the overflow
        </div>
    </div>
</div>

这是非工作的CSS

.a {
        border:black 1px solid;
        float: left;
        width: 122px;
        display: table;
        line-height: 14px;
    }
    .b {
        width:100%;
        color: black;
        font-size: 14px;
        text-transform: uppercase;
        cursor: pointer;
    }
    .c {
        line-height: 11px;
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space:Nowrap;
    }

但是，如果我更改b的宽度为122px它是完美的(请注意，122px应该等于100％)。

你可以在这里查看：http://jsfiddle.net/vNRpw/4/

谢谢！

解决方法

有显示：表;在第一个div，导致省略省略的麻烦。如果你删除这个，那么省略号就可以正常工作了。

我不会删除可能会帮助某人的问题

检查它在这里工作：http://jsfiddle.net/vNRpw/6/

原文地址：https://www.jb51.cc/css/218189.html