18

希望有人可以提供帮助。

我有 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/

谢谢！

4

2 回答 2

9

在第一个div display: table;中导致省略号出现问题。如果您删除它，则省略号可以正常工作。

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

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

于 2013-05-08T01:57:53.870 回答
7

像这样的东西怎么样：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

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

</style>

</head>
<body>

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

</body>
</html>

主要的变化是把宽度略小于 100% .c。

于 2013-05-08T01:53:31.603 回答