如何将不透明度应用于text-overflow: ellipsis

Question

以下代码段可以正确地淡出文本，但省略号仍然不透明。 http://jsfiddle.net/Wexcode/TJ7A9/

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

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

- Wex

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; }

- Wex

---

是的，这是因为字符串被添加为其包含块的最后一个内联子元素。在不正确的示例中，它出现在div内，作为span的后续兄弟元素，因此span上的不透明度不适用于它。 - BoltClock