使用文本溢出：省略号；仅当在 div 中达到 3 行时[重复]答案

【问题标题】：using text-overflow:ellipsis; only when reaching 3 lines in a div [duplicate]使用文本溢出：省略号；仅当在 div 中达到 3 行时[重复]
【发布时间】：2013-04-20 05:42:11
【问题描述】：

这是我的css sn-p

.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;
}

【问题讨论】：

仅使用 css 是不可能的...我使用这个插件 plugins.jquery.com/ellipsis
我明白了，现在就试试这个插件..
把你的代码放在小提琴里然后发给你..

标签： javascript ellipsis css

【解决方案1】：

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

pure css 可以在一些浏览器中运行，但它有很多限制。假设您希望 ... 在第 3 行的末尾。

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

【讨论】：

【解决方案2】：

你也可以试试这个

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

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

【讨论】：

:after 技术对我有用，但就我而言，我必须删除“right: 0”