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

假设我有一行具有固定高度，并且我在其列中插入了一些文本。如果太长，我希望将其剪掉，并在行尾添加三个点，如下所示：

我在用着文本溢出：省略号；我的行中有此属性，但无法使其工作。

JsFiddle http://jsfiddle.net/Alexnotonfire/y6oatnzy/1/

我究竟做错了什么？

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

如果您想使用 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;
}

Here is jsfiddle https://jsfiddle.net/41kuz29o/

用于理解 css 中的拍线线夹 https://css-tricks.com/line-clampin/