Question

我希望在特殊宽度的div内只包含一行文本。如果文本超出两行的长度，那么我希望显示elipses。有什么解决方案可以使用CSS吗？

我使用了css属性text-overflow:ellipsis。它仅适用于一条线。我还使用了 - webkit-line-clamp:2。它适用于chrome和safari浏览器。文本换行需要在所有浏览器中使用sopport（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');
}

然后，如果元素没有显示，则只显示点。

在div中的两行中包装文本

1 个答案: