CODEWITHSUNDEEP
texttruncatecss
nipiv
nipiv

Reputation: 853

Text-overflow CSS truncation

Earlier i was doing it dynamically using JS.. but we were getting some performance issues cuz of which we have to come with an alternative option.

I am now truncating a long text on my tab names using text-overflow style.

but i have a small issue if some one can resolve it

currently this is how my text truncation looks like

This text has been trun...

Here the three dots (...) comes in black colour and i want to change it to red.

Is there a way that we can achieve this one?

Upvotes: 65

Views: 144724

Answers (4)

Hesham Elquerm
Hesham Elquerm

Reputation: 59

Dolarzo's answer was perfect, just a little tweak to make it super-perfect, use max-width instead of width, so when text is short it displays normally in position, but ONLY when it is long, truncation occurs. You may also use relative values for width to make things more dynamically responsive, like so:

width: 25vw;

Upvotes: 0

user1386320
user1386320

Reputation:

Works here:

 .overme {
        width: 300px;
        overflow:hidden; 
        white-space:nowrap; 
        text-overflow: ellipsis;
        color: red;
    }
 <div class="overme">
        how much wood can a woodchuck chuck if a woodchuck could chuck wood?
    </div>

Trailing dots/ellipsis are colored in red using that basic CSS.

Upvotes: 136

Munna Kumar
Munna Kumar

Reputation: 545

**Easy Way to do with css **

HTML 

<div class="text-truncate">
The company’s commitment to rebuilding the relationship with you, our community</div>

Css : 

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Upvotes: 9

gitaarik
gitaarik

Reputation: 46350

I assume you only want the dots to appear in red? Unfortunately this isn't possible with simple css. However I found a tutorial which manages to make a custom ellipsis style, that will only be displayed when it's necessary:

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

It's quite a nice hack and not easy to explain in words. Maybe this jsfiddle I just made can help you:

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

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

Anyway, here's the raw code:

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's 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're gonna implement this you want to remove all the borders and the 'end' text. I made this to be an easy to understand example. Also you probably want to give the wrap a position: absolute; and then give it margin-left: -32px, where the width is the width for the .left-side, so your text won't have a margin on the left side.

Good luck!

Upvotes: 3

Related Questions