javascript - 使用文本溢出：省略号；仅当在 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，任何人都可以教我怎么做？谢谢！

更新

我尝试删除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;
 }

Answer 2

你也可以试试这个

.test { width: 150px; height: 60px; overflow-y: hidden; position: relative; }

.test:after { content: '...'; position: absolute; bottom: 0; right: 0; }