设置 `text-overflow: ellipsis` 的省略号颜色

Question

我有一个固定宽度的

，里面有一个带文本的

。文本的一部分在中以颜色区分。文本

已经具备了必要的样式来实现文本溢出（省略号），但是省略号的颜色没有继承的颜色，因为定义在

上。当我将定义放在上时，它忽略了其父元素的宽度。

测试代码：

.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

- Demnogonis

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>

演示代码

如果省略号的颜色与div相同，那么可以将div 的颜色设置为所需的省略号颜色，然后使用.color 将初始文本设置为黑色。

- badAdviceGuy

---

超越常规思维，不错。 - Hobroker

哇..这很困难，因为你无法知道那个文本的真实颜色会是什么...想象一下 <div><span>some text <a>link</a> other text</span></div> 如果你将 div 上的 color 设置为 purple，那么当 <a> 被截断时，它将变成 purple，而不是预期的 <a> 颜色。你有任何想法是否有解决方案吗？ - Danosaure