How to chop a text adding three dots "..."?

Question

I need to chop a text adding tree dots at the end "..." the three dots should appear only on the second line of the text. This jsfiddler show the example for one line, but I not able to display two lines of text before adding dots. Any idea how to solve it?

http://jsfiddle.net/hT3YA/263/

#test { 
    background:#eee; 
    border:1px dotted #ccc; 
    margin:1em; 
    padding:5px; 
    width:100px;
    height:200px;
}
.crop { 
    overflow:hidden; 
    white-space:nowrap;
    text-overflow:ellipsis; 
    width:200px; }



<div id="test" class="crop">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
</div>

possible duplicate of [Add three dots in a multiline span](http://stackoverflow.com/questions/11802361/add-three-dots-in-a-multiline-span) — Itay, Sep 12 '13 at 12:04
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow — Royi Namir, Sep 12 '13 at 12:05
Thanks Itay, my problem is different, I need the dots be added on the SECOND LINE of text not the first line. — GibboK, Sep 12 '13 at 12:06
You may find solutions here : http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/ — David, Sep 12 '13 at 12:07

GibboK · Accepted Answer · 2013-09-12T12:48:15.353

4

Solution here ONLY for webkit, thanks for your comments.

http://jsfiddle.net/hT3YA/268/

#test { 
    background:#eee; 
    border:1px dotted #ccc; 
    margin:1em; 
    /*padding:5px; */
    /*width:100px;*/

}
.crop {
     display: -webkit-box;
     width: 200px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
 }


<div id="test" class="crop">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
</div>

edited Sep 12 '13 at 12:48

answered Sep 12 '13 at 12:21

GibboK

71,848
143
435
658

Looks like that will only work in webkit browsers. It doesn't work in Firefox. – FixMaker Sep 12 '13 at 12:25
yes Lorax, I did not mention in my answer it works for webkit only. – GibboK Sep 12 '13 at 12:48
1

please add a comment when downvoting – GibboK Sep 12 '13 at 16:40

score 2 · Answer 2 · answered Sep 12 '13 at 12:55

2

Add this with your CSS

-webkit-line-clamp: 2;

and try

answered Sep 12 '13 at 12:55

Dinesh Kanivu

2,551
1
23
55

How to chop a text adding three dots "..."?

2 Answers2