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

【问题标题】：Text that overflows the container should be hidden and "..." added溢出容器的文本应隐藏并添加“...”
【发布时间】：2015-08-10 01:36:24
【问题描述】：

假设我有一个简单的 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>

所以我想将容器设置为最大高度，比如说 300 像素。我可以使用溢出：隐藏，但它会在我的文本中做一个令人讨厌的裁剪。我希望在最后 3 个字符的 400 个字符之后进行干净的剪切，如“点击‘更多’查看更多内容”中的“...”

我有一种预感，有人已经为此做了 sn-p，或者在 Jquery 中有一个优雅的做法。

【问题讨论】：

标签： text overflow positioning crop hidden

【解决方案1】：

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

CSS 中 400 个字符后无法剪切

【讨论】：

我相信如果我将 div 放在 max-height 上，它会尽可能多地填充文本？