0

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

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

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

提前致谢。

我观察到的一件事..如果文本适合完整的两行，它的显示就像这样。

testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte 
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte ...

假设如果文本适合两行的一半，例如

 testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte 
    testtesttesttesttest                                                               ...

我期待如下：

 testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte 
 testtesttest...

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

4

1 回答 1

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

见小提琴： //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');
}

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

于 2013-05-08T05:19:10.880 回答