設置`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; 
}