Set dot color of `text-overflow: ellipsis`

Question

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

Sumit · Accepted Answer · 2018-08-02 12:47:20Z

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.

WOW.. this is quite difficult because you cannot know what the real color of that text will be... imagine <div><span>some text <a>link</a> other text</span></div> If you set the color on div to be purple, then when the <a> is truncated, it will be purple instead of the expected <a> color. Do you have any ideas if there is a solution for this?

Collectives™ on Stack Overflow

Set dot color of `text-overflow: ellipsis`

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related