我有一个宽度固定的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>
解决方法
如果我明白您的问题,这可能适用于您：
如果省略号使用了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;
}
