CSS 设置 `text-overflow: ellipsis` 的点颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21861125/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set dot color of `text-overflow: ellipsis`
提问by Demnogonis
I have a divwith a fixed width, which has a divwith text inside. Parts of the text are in a spanfor coloring. The text divhas all necessary styles for text-overflow with dots at the end (ellipsis), but the dots are not inheriting the span's color, because their definition is on the div. When I put the definition on the span, it ignores its parent's width.
我有一个div固定宽度的，里面有一个div带文本的。部分文本在 a 中span用于着色。文本div具有文本溢出的所有必要样式，末尾带有点（省略号），但点不继承span的颜色，因为它们的定义在div. 当我将定义放在 上时span，它会忽略其父级的宽度。
Test code:
测试代码：
.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>Is there any clean CSS way to solve this problem? I'd like to stick with text-overflow: ellipsis;, because the other solutions for text truncation are a bit messy in my opinion.
有没有干净的 CSS 方法来解决这个问题？我想坚持使用text-overflow: ellipsis;，因为在我看来，文本截断的其他解决方案有点混乱。
Referrent source at https://www.w3schools.com/cssref/css3_pr_text-overflow.asp
参考来源https://www.w3schools.com/cssref/css3_pr_text-overflow.asp
采纳答案by badAdviceGuy
If I understand your issue correctly, this might work for you:
如果我正确理解您的问题，这可能对您有用：
.container {
width:120px;
background: lightgray;
}
.text {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color:#b02b7c;
}
.color {
color: black;
}<div class="container">
<div class="text"><span class="color">Lorem</span> ipsum dolor sit amet, consetetur
</div><!-- works -->
</div>If the ellipsis is taking the color of the div, then make the div the color you want the ellipsis to be, and use .colorto set the initial text black.
如果省略号采用 div 的颜色，则将 div.color设为您希望省略号的颜色，并用于将初始文本设置为黑色。
