设置`文本溢出：省略号'的点颜色

Question

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

测试代码：

span

.container {
  width: 120px;
}

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

.color {
  color: #b02b7c;
}

有没有干净的CSS方法来解决这个问题？我想坚持使用<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>，因为我认为文本截断的其他解决方案有点混乱。

来自https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

的推荐来源

Answer 1

如果我理解你的问题，这可能适合你：

.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>

<强> Demo Fiddle

如果省略号采用div的颜色，则将div设为您想要省略号的颜色，并使用.color将初始文本设置为黑色。