CSS省略号不适用于此div

Question

代表性代码示例：

<div style="width:300px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
    <ul>
         <li>Long name: <span>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</span></li>
    </ul>
</div>

http://jsfiddle.net/G57LE/

似乎只有溢出属性才能在这里做任何事情。

如何让文本在溢出时对此div进行省略（省略号在div结束之前发生）？谢谢！

Answer 1

因为文本不在div本身。您必须将宽度和溢出属性应用于跨度本身。

可能的解决方案：CSS text ellipsis when using variable width divs

Answer 2

添加此

display: inline-block; overflow: hidden; text-overflow: ellipsis; width:300px;

跨越班级.value

这里是http://jsfiddle.net/G57LE/5/