使用文本溢出：省略号;只有在一个div

达到3条线时，这是我的CSS代码段使用文本溢出：省略号;只有在一个div

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

来源

2013-04-26 galao

不可能的......我用这个插件http://plugins.jquery.com/ellipsis/ – elclanrs 2013-04-26 06:11:46

我明白了，会尝试插件现在.. – galao 2013-04-26 06:13:29

把乌尔代码放在小提琴中，并发送你.. – PraJen 2013-04-26 06:20:54

您可以使用dotdotdot插件http://dotdotdot.frebsite.nl/，它为我工作得很好。

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

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

来源

2013-04-26 08:21:02

您也可以只用CSS试试这个

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

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

来源

2013-04-26 09:49:09

使用文本溢出：省略号;只有在一个div

回答

相关问题