Question

我们从后端获取内容，我们只需显示三行。在第三行结束时，我们需要添加三个点。

到目前为止，我已经做了三行 -

var height = $(this).find('.sample').outerHeight();
var lineHeight = $(this).find('p').css('line-height');
$(this).find('.sample').css('max-height',lineHeight*3);

.sample{overflow: hidden;}

此处显示三行。但是如何添加点？我已经尝试过webkits，但它不适用于ie。

Answer 1

你可以试试这个：

  .add-three-dots{display: inline-block;

   width: 240px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   background: #FFFCD7;
    padding: 5px;
     }

      <span class="add-three-dots">How To Add Three Dots In the End Of String with Css And Jquery?</span>

Answer 2

div{
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-wrap:break-word;
}

也许这段代码在IE浏览器中不起作用

在第n行末尾添加三个点

2 个答案: