如何设置`text-overflow:ellipsis`的点颜色?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (135)

我有一个div固定的宽度,里面有一个div文本。部分文字处于span着色状态。该文本div具有文本溢出的所有必要样式,并且末尾有点(省略号),但点不会继承其span颜色,因为它们的定义位于其上div

测试代码:

.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方式来解决这个问题?

提问于
用户回答回答于

参考教程:Demo Fiddle

如果省略号采用div的颜色,则将div .color设为你希望省略号的颜色,然后使用将初始文本设置为黑色。

HTML:

<div class="container">
    <div class="text"><span class="color">Lorem</span> ipsum dolor sit amet, consetetur
    </div><!-- works -->
</div>

CSS:

.text {
    //current styles 
    color:#b02b7c; 
}

.color {
    color: black;
}

扫码关注云+社区

领取腾讯云代金券