CSS trimming CSS overflow

Question

I used to do this dynamically using JS .. but we were getting some performance issues from which we had to come up with an alternative.

Now I truncate the long text in the tab names using the text overflow style.

but i have a little problem if someone can solve it

Currently, this is how my text truncation looks like

This text was trun ...

Here the three dots (...) are black and I want to change it to red.

Is there a way we can achieve this?

Answer 1

It works here:

• http://jsfiddle.net/TReRs/4/

Code (HTML and CSS):

<div class="overme"> how much wood can a woodchuck chuck if a woodchuck could chuck wood? </div> 

CSS

 .overme { width: 300px; overflow:hidden; white-space:nowrap; text-overflow: ellipsis; color: red; } 

Endpoints / ellipses are colored red using this basic CSS.

Answer 2

I assume you want the dots to be displayed in red? Unfortunately, this is not possible with simple css. However, I found a tutorial that allows you to create your own ellipsis style, which will be displayed only when necessary:

https://www.mobify.com/dev/multiline-ellipsis-in-pure-css/

This is a pretty good hack and is not easy to explain in words. Perhaps this jsfiddle I just made might help you:

http://jsfiddle.net/MyUQJ/9/

Remove overflow: hidden; on .wrap to find out what's going on. The main idea is that the .end div moves to the bottom left in the .left-side when the text overflows, and when it does not overflow it in the lower right part of the .text . Then the div .ellipsis positioned absolute inside the relative .end , so you, when you position it on the right, are visible when the text overflows, and it overflows when the text does not overflow! Funny, isn't it?

In any case, the raw code here:

HTML:

 <div class="wrap"> <div class="left-side"></div> <div class="text"> This is a short story, it doesn't need to be ellipsed. </div> <div class="end"> end <div class="ellipsis">...</div> </div> </div> <br> <br> <br> <br> <div class="wrap"> <div class="left-side"></div> <div class="text"> This is a long story. You won't be able to read the end of this story because it will be to long for the box I'm in. The story is not too interesting though so it good you don't waste your time on this. </div> <div class="end"> end <div class="ellipsis">...</div> </div> </div> 

CSS

 .wrap { height: 100px; width: 234px; border: solid 1px #000; overflow: hidden; } .left-side { float: left; width: 32px; height: 100px; background: #F00; } .text { float: right; border: solid 1px #0F0; width: 200px; } .end { position: relative; float: right; width: 30px; border: solid 1px #00F; } .ellipsis { position: absolute; top: -25px; left: 198px; background: white; font-weight: bold; color: #F0F; } 

Of course, when you are going to implement this, you want to remove all borders and the text "end". I did this to be a clear example. Also, you probably want to give wrap a position: absolute; and then give it margin-left: -32px , where width is the width for .left-side , so your text will not have a margin on the left side.

Good luck