gpt4 book ai didi

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

转载 作者:技术小花猫 更新时间:2023-10-29 10:17:44 25 4
gpt4 key购买 nike

希望有人能提供帮助。

我有 3 个嵌套的 div。 parent 、 child 和 child 的 child 。

我想要完成的(动机不相关)是那个 child 根据 parent 的宽度(百分比)获得相对宽度,并且 child 的 child 必须有一个溢出省略号取决于那个宽度。问题是,如果我在 child 的宽度中使用 %,则省略号不起作用,如果我以像素为单位定义宽度,它就起作用。

这是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 中有 display: table;,这导致了省略号的问题。如果删除它,则省略号可以正常工作。

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

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

关于css - 文本溢出省略号不适用于动态宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16431333/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com