在 div 中的两行内换行

Question

我希望在特殊宽度的 div 内仅用两行包装文本。如果文本超出两行的长度，那么我希望显示省略号。有没有使用 CSS 的解决方案？

我使用了 css 属性 text-overflow:ellipsis。它仅适用于一行。我还使用了 -webkit-line-clamp:2. 它在 chrome 和 safari 浏览器中运行良好。 文本换行需要支持所有浏览器（firefox 和 IE9）。

请建议我使用 css 或 javacsript 的解决方案？

提前致谢。

我观察到的一件事.. 如果文本适合完整的两行，则其显示如下。

testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte 
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte ...

假设文本是否适合两行的一半

 testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte 
    testtesttesttesttest                                                               ...

我期待如下：

 testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte 
 testtesttest...

我尝试了一些修改没有成功。

Answer 1

你可以玩这样的东西

p.ellipsis {
position:relative;
line-height:1em;
max-height:2em;      /* 2 times the line-height to show 2 lines */
overflow: hidden;
}
p.ellipsis::after {
content:"...";
font-weight:bold;
position:absolute;
top:1em;
right:0;
padding:0 20px 1px 10px;
background: white;
}

见小提琴：http://jsfiddle.net/T7B9c/

或者你可以使用clamp.js

编辑：要计算是否没有溢出，您可以这样做：

<p id="ellipsis">lots of text</p>

var $element = $('#ellipsis');
if( $element[0].offsetHeight < $element[0].scrollHeight || $element[0].offsetWidth < $element[0].scrollWidth){
   // your element have overflow
   $element.addClass('ellipsis');
}
else{
  $element.removeClass('ellipsis');
}

如果元素有未显示的内容，它只会显示点。