html - 如何将不透明度应用于文本溢出 : ellipsis

Question

以下 fiddle 正确淡出文本，但省略号仍然不透明。

http://jsfiddle.net/Wexcode/TJ7A9/

<div id="incorrect">
    <span>Incorrect</span>
</div>

#incorrect { 
    width: 50px;
    overflow: hidden;
    text-overflow: ellipsis; }
#incorrect span { opacity: .25; }

Answer 1

从 text-overflow: ellipsis 添加的 ... 的显示属性似乎继承自定义它的元素。只需将定义移动到半透明元素即可。

overflow      : hidden;
width         : 100%;
text-overflow : ellipsis;
display       : inline-block;

http://jsfiddle.net/Wexcode/TJ7A9/2/

#correct { width: 50px;}
#correct span { 
    opacity: .25;
    overflow: hidden;
    white-space: nowrap;    
    text-overflow: ellipsis;
    width: 100%;
    display: inline-block; }