怎么实现div中多行文本溢出省略号效果？

Question

怎么实现div中多行文本溢出省略号效果？
效果图如下：

Answer 1

http://m.111cn.net/art-67208.htm

Answer 2

dotdotdot.js

Answer 3

看上去有两种方案

• 常见简单方法就是预估空间占用字数，然后截取，拼接省略号，但是这种方式是不能做到完全精确的。

• 或者你直接在div的右下角覆盖一个省略号的背景色图片，还不嫌麻烦，再做个div覆盖右下角也行，感觉好蛋疼。

嗯，看了上面的回复，是第二种。 ;D

Answer 4

text-overflow:ellipsis; 

Answer 5

width: 100px;//设置一个宽度
overflow: hidden;//隐藏
text-overflow: ellipsis;//省略号
white-space: nowrap;//不换行

Answer 6

赞同 @chirs_Evans的说法，我也是这样用的，简单方便。

Answer 7

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