Dan*_*ern 17 css nested overflow ellipsis css3
希望有人能提供帮助.
我有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/
谢谢!
曾 display: table;在其中导致用省略号烦恼第一个div.如果你删除它,那么省略号工作正常.
我不会删除它可能对某人有帮助的问题
检查它在这里工作:http://jsfiddle.net/vNRpw/6/
这样的事情怎么样:
<!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.