如何使用文本溢出:宽度未知的省略号

时间:2013-03-22 01:45:19

标签: css ellipsis css3

我有label这可能是任何宽度,应该使用CSS text-overflow:ellipsis属性。我似乎无法让它工作。 #a有效,因为设置了width,这是预期的结果。如何让#b工作?

<div id="a">
    <a href="#">link</a>
    <input type="checkbox" />
    <label>checkbox label</label>
</div>

<div id="b">
    <a href="#">link</a>
    <input type="checkbox" />
    <label>checkbox label</label>
</div>

#a       {width:100px; background:#ddd;}
#a label {text-overflow:ellipsis; overflow:hidden; white-space:nowrap; float:right; width:50px;}
#a a     {float:right}

#b       {width:100px; background:#ddd;}
#b label {text-overflow:ellipsis; overflow:hidden; white-space:nowrap; float:right;}
#b a     {float:right}

JSFIDDLE

0 个答案:

没有答案