Set dot color of `text-overflow: ellipsis`

css

Solution

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.

Problem

I have a `div` with a fixed width, which has a `div` with text inside. Parts of the text are in a `span` for coloring. The text `div` has all necessary styles for text-overflow with dots at the end (ellipsis), but the dots are not inheriting the `span`'s color, because their definition is on the `div`. When I put the definition on the `span`, it ignores its parent's width. Test code: ``` .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> ``` Is there any clean CSS way to solve this problem? I'd like to stick with `text-overflow: ellipsis;`, because the other solutions for text truncation are a bit messy in my opinion. Referrent source at https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

Original source