希望有人能帮忙。
我有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/