If I understand your issue correctly, this might work for you:
.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>Demo Fiddle
If the ellipsis is taking the color of the div, then make the div the color you want the ellipsis to be, and use .color to set the initial text black.