如何砍掉添加三个点“......”的文字？

Question

我需要剪切一个文本，在末尾添加树点“......”三个点应该只显示在文本的第二行 。这个jsfiddler显示了一行的示例，但在添加点之前我无法显示两行文本。 知道怎么解决吗？

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>

Answer 1

解决方案仅适用于webkit，感谢您的意见。

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>

Answer 2

使用CSS添加此内容

-webkit-line-clamp: 2;

并尝试