css – 设置`text-overflow:ellipsis`的点颜色

前端之家收集整理的这篇文章主要介绍了css – 设置`text-overflow:ellipsis`的点颜色前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个宽度固定的div,里面有一个文字.文本的一部分是在着色的跨度.文本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方式来解决这个问题?我想坚持使用文本溢出:省略号;因为在我看来,文本截断的其他解决方案有点凌乱.

解决方法

如果我明白您的问题,这可能适用于您:

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;
}

猜你在找的CSS相关文章