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

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>

演示小提琴

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