javascript - 在 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;
}

参见 fiddle :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');
}

然后它只会在元素有未显示的内容时显示点。