Text 溢出容器的文本应隐藏，并且“…”&引用；补充

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

广告标题
广告定位

Lorem ipsum dolor sit amet，Concertetur Adipising
精英。请不要因为时间的原因而停止工作。普雷森特欧盟
弗林尼利亚·尼尔。这是我的拿手好戏。佩伦茨克
拉奥里特

更多

所以我想把容器的最大高度设为300px。我可以使用overflow:hidden，但它会在我的文本中造成严重的剪切。我希望在400个字符后，最后3个字符的清晰切割为“…”如“单击“更多”查看更多”

我有一种预感，有人已经为此编写了一个代码片段，或者在Jquery中有一个很好的实现方法

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

---

CSS中400个字符后无法剪切

我相信如果我将div设置为最大高度，它将尽可能多地填充文本？