Twitter bootstrap 如何在引导列中使用文本溢出？

假设我有一个固定高度的行，我在它的列中插入了一些文本。如果它太长，我想把它剪掉，在这条线的末尾加上三个点，像这样：

我正在使用文本溢出：省略号属性，但无法使其工作

我做错了什么

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>

---

试着用js来做。它只能显示到50个字符。 更新的小提琴是-

---

如果要使用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中的换行符，请定义css类并将其分配给要分配列大小的div，如：-

<div class="container">
  <div class="row">    
    <div class="col-xs-4 trimText" 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>

---

JSFIDLE似乎没有什么不好的地方。DJ应该只用于功能性工作，CSS可以自己处理。最佳经验法则：HTML=structure，CSS=style，JS=manipulation

<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>

.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;
}

<div class="container">
  <div class="row">    
    <div class="col-xs-4 trimText" 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>

.trimText{
    white-space: nowrap;
    overflow: hidden; 
    text-overflow: ellipsis
}