如何在Bootstrap列中使用文本溢出？

Question

假设我有固定的高度行和我插入一些文本到其列。如果它太长了，我想它被切断，并在该行的末尾应该这样添加三个点：

我使用文本溢出：省略号;属性在我的行中，但不能得到它的工作。

JsFiddle

我在做什么错？

HTML

<div class="container"> 
    <div class="row text">  
    <div class="col-xs-4" style="border: solid"> 
Some really long text! Some really long text! Some really long text! Some really long text! The end! Some really long text! The end! Some really long text! The end! Some really long text! The end! 
    </div> 
    </div>   
</div> 

CSS

.row { 
    margin: 2px 0; 
} 

.text { 
    word-wrap: break-word; 
    height: 50px; 
    text-overflow: ellipsis; 
} 

Answer 1

如果你想做到这一点使用CSS，然后尝试下面的代码：

HTML：

<div class="container"> 
    <div class="row">  
    <div class="col-xs-4" style="border: solid"> 
     <div class="text"> 
      Some really long text! Some really long text! Some really long text! Some really long text! The end! Some really long text! The end! Some really long text! The end! Some really long text! The end! 
     </div> 
    </div> 
    </div>   
</div> 

CSS：

.row { 
    margin: 2px 0; 
} 

.text { 
    display: block; 
    display: -webkit-box; 
    max-width: 400px; 
    height: 50px; 
    margin: 0 auto; 
    line-height: 1.2; 
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

这里是jsfiddle

对于理解行CSS clapming Line Clamping

Answer 2

试试做使用JS。它只会显示至50个字符。 更新小提琴是 - http://jsfiddle.net/y6oatnzy/3/

$(document).ready(function() { 
    var showChar = 50; 
    $('.more').each(function() { 
     var content = $(this).html(); 

     if(content.length > showChar) { 

      var c = content.substr(0, showChar); 
      var h = content.substr(showChar-1, content.length - showChar); 

      var html = c + '..'; 

      $(this).html(html); 
     } 
    }); 
});