使用文本溢出:省略号; 只有在div中达到3行时

Question

这是我的CSS代码段

.test{
    width:150px;
    height:60px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

它的作用是......

the quick brown fo...

我想要的是什么

the quick brown fox
jumps over the lazy
dog. the quick br...

无论如何只用CSS做到这一点？或者我是否需要使用javascript.如果需要javascript,任何人都可以教我如何？谢谢!

UPDATE

我尝试删除white-space: nowrap;并添加overflow-y: hidden;它给我3线布局但没有省略号

.test{
    width:150px;
    height:60px;
    overflow-y: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

Answer 1

你可以使用dotdotdot插件http://dotdotdot.frebsite.nl/，它对我来说很好用。

纯 css 可以在一些浏览器中工作，但它有很多限制。假设你想...在第 3 行的末尾。

.test{
   display: -webkit-box;
   height: 60px; 
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   text-overflow: ellipsis;
 }