How to cut text by adding three dots "..."?

Question

I need to cut the text, adding at the end of the tree points "..." three points should be displayed only in the second line of text . This jsfiddler shows an example for one line, but I cannot display two lines of text before adding points. 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 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> 

Answer 1

The solution here is 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 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> 

Answer 2

Add this with CSS

 -webkit-line-clamp: 2; 

and try