设置 `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;，因为我认为其他文本截断解决方案有点混乱。

参考来源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 将初始文本设置为黑色。