文本溢出省略号不适用于动态宽度答案

【问题标题】：text-overflow ellipsis does not work with dynamic width文本溢出省略号不适用于动态宽度
【发布时间】：2013-05-02 03:10:06
【问题描述】：

希望有人能提供帮助。

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

谢谢！

【问题讨论】：

不必要的反对票。如果我更新了答案，每个人都会知道它已经解决了，所以没有人会在上面浪费时间。这将给我时间来回答这个问题。此外，两天后我无法将自己的答案标记为已接受。无论如何，感谢您的建议

标签： css nested overflow ellipsis

【解决方案1】：

在第一个 div 中有 display: table;，这会导致省略号出现问题。如果你删除它，那么省略号就可以正常工作。

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

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

【讨论】：

这条规则给我的代码中的省略号带来了很多麻烦。起初它看起来像省略号，直到我调整了 DIV 的大小。以 display:table 完美运行。谢谢！
我的显示在一行而不转到DIV的下一行stackoverflow.com/questions/26342411/…
我在 Bootstrap 的 input-group 旁边添加了省略号，它有 display:table。除了删除display:table，还有其他方法可以解决这个问题吗？更新：转向另一个问题：stackoverflow.com/questions/9789723/…
display:inline-table 有同样的问题。改为内联块并修复它。

【解决方案2】：

这样的事情怎么样：

<!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>

主要变化是在.c 上设置了略小于 100% 的宽度。

【讨论】：

我的保持在一行并显示省略号。 stackoverflow.com/questions/26342411/…