使用text-overflow：ellipsis;只有当在div中达到3行时 [英] using text-overflow:ellipsis; only when reaching 3 lines in a div

问题描述

这是我的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，任何人都可以教我如何？感谢！

is there anyway to do this with just CSS? or do i need to use javascript for this. If javascript is needed, anyone can teach me how? thanks!

UPDATE

我试图移除 white-space：nowrap; 并添加了 overflow-y：hidden; 它给了我3行布局但没有省略号

i tried removing the white-space: nowrap; and added overflow-y: hidden; it gives me the 3 line layout but no ellipsis

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

推荐答案

c $ c> dotdotdot 插件 http://dotdotdot.frebsite.nl/ ，它工作正常为我。

you could use the dotdotdot plugin http://dotdotdot.frebsite.nl/, it works fine for me.

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

pure css can work in some broswers, but it has many limits. Suppose you want ... at the end of the line3.

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

这篇关于使用text-overflow：ellipsis;只有当在div中达到3行时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！