How to create shorten text?

Question

I have HTML like :

<div class="box">
   <a href="#">Stackoverflow is very useful site and I love it</a>
</div>

and CSS like :

.box {
    width:230px;
    height:50px;
    line-height:50px;
    background:#eee;
}

.box a {
    color:#000;
}

I want create shorten text of link. If it itself overflow the box class, then take it by "...". How can I do that with css or jquery?

Check jsfiddle here

try this http://stackoverflow.com/questions/11417544/truncate-paragraph-first-100-character-and-hide-rest-content-of-paragraph-to-sho — Vinod Louis, Nov 11 '13 at 10:56
There's no need to put it in jquery , unless if you have a button that say make it shorten — Drixson Oseña, Nov 11 '13 at 10:57

score 6 · Accepted Answer · answered Nov 11 '13 at 10:55

6

Add following styles to .box:

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

Working sample: http://jsfiddle.net/qLzK7/

answered Nov 11 '13 at 10:55

Krzysztof

15,900
2
46
76

score 3 · Answer 2 · answered Nov 11 '13 at 10:55

3

You need to set text-overflow: ellipsis for that purpose see this link for more info

answered Nov 11 '13 at 10:55

Bhojendra Rauniyar

83,432
35
168
231

score 3 · Answer 3 · answered Nov 11 '13 at 10:56

3

.box a 
{
    color:#000;
    text-overflow: ellipsis;
}

answered Nov 11 '13 at 10:56

Jacques Snyman

4,115
1
29
49

score 2 · Answer 4 · answered Nov 11 '13 at 10:58

2

Try this:-

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

answered Nov 11 '13 at 10:58

Sujata Chanda

3,355
2
21
35

score 1 · Answer 5 · answered Nov 11 '13 at 11:01

1

try this,

 .box{
width:230px; 
height:50px;
line-height:50px
;background:#eee; 
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.box a{color:#000}

http://jsfiddle.net/9yatw/

answered Nov 11 '13 at 11:01

radha

782
4
8

arclite · Answer 6 · 2013-11-11T21:59:01.540

Try this:

$(document).ready(function() {
    var showChar = 37;
    var ellipsestext = "...";
    $('.box').each(function() {
        var content = $(this).find("a").html();
        if(content.length > showChar) {
         var a = content.substr(0, showChar);
         var b = content.substr(showChar-1, content.length - showChar);
         var html = a + ' ' + ellipsestext;
            $(this).find("a").html(html);
        }

    });
});

How to create shorten text?

6 Answers6