如何在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线夹中的拍线