设置`text-overflow：ellipsis`的点颜色

Question

我有一个固定宽度的div，里面有文字div。部分文字在span中用于着色。文本div具有文本溢出的所有必要样式（省略号），但点不会继承span的颜色，因为它们的定义位于div上。当我将定义放在span上时，它会忽略其父宽度。

测试代码：

.container { 
 
    width: 120px; 
 
} 
 

 
.text { 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
} 
 

 
.color { 
 
    color: #b02b7c; 
 
}

<div class="container"> 
 
    <div class="text">Lorem <span class="color">ipsum dolor sit amet, consetetur</span> 
 
    </div> 
 
    <!-- works --> 
 
    <div>Lorem <span class="text color">ipsum dolor sit amet, consetetur</span> 
 
    </div> 
 
    <!-- doesn't work --> 
 
</div>

有没有干净的CSS的方法来解决这个问题？我想坚持text-overflow: ellipsis;，因为在我看来，用于文本截断的其他解决方案有点麻烦。

Answer 1

如果我正确理解您的问题，这可能会为你工作：如果省略号走的是div的颜色

Demo Fiddle

，然后再进行格的颜色你想要的省略号并且使用.color将初始文本设置为黑色。

HTML：

<div class="container"> 
    <div class="text"><span class="color">Lorem</span> ipsum dolor sit amet, consetetur 
    </div><!-- works --> 
</div> 

CSS：

.text { 
    //current styles 
    color:#b02b7c; 
} 

.color { 
    color: black; 
}