溢出容器的文本應該隱藏並且添加「...」

可以說我有一個簡單的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>

所以我想設置容器的最大高度可以說300px。我可以使用溢出：隱藏，但它會在我的文本中做一個討厭的作物。我希望400個字符後的最後3個字符爲「...」，如「通過點擊'More'查看更多信息」

我有一個預感，有人已經爲此做了片段，或者在那裏在Jquery中做這件事是一件很高雅的事情。

來源

2015-05-27 CountGradsky

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

有沒有辦法後CSS

來源

2015-05-27 19:26:58 yuk

首先的400個字符切割，謝謝我不知道這個屬性。 – CountGradsky

我相信如果我將div放在最大高度上，它會盡可能多地填充文本？ – CountGradsky

溢出容器的文本應該隱藏並且添加「...」

回答

相關問題