Question

假设我有一个简单的div，我想从数据库中生成广告。我无法预测描述会有多长。

 <div class="ads-front col-sm-6 col-md-4">
  <h2 class="col-xs-12">Ad title</h2>
  <h3 class="col-xs-12">Ad location</h3>
  <p class="col-xs-12 ad-description">
    Lorem ipsum dolor sit amet, consectetur adipiscing     
    elit. Donec consectetur egestas risus ut tempor. Praesent eu 
    fringilla nisl. Nullam blandit id nisi ac dapibus. Pellentesque 
    laoreet
  </p>
  <button class="red-button-front red-button col-xs-6">More</button>
</div>

所以我想把容器设置为max-height，比方说300px。我可以使用溢出：隐藏但它会在我的文本中做一个讨厌的裁剪。我希望在400个字符之后进行干净的切割，最后3个字符为“......”，如“通过点击'更多'看更多”

我有预感，有人已经为此做过片段，或者在Jquery中有一个优雅的做法。

Answer 1

div {
    text-overflow: ellipsis;
    overflow: hidden;
}

无法在CSS中删除400个字符

应该隐藏溢出容器的文本并添加“...”

1 个答案: