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

Question

假设我有一行高度固定，我在它的列中插入了一些文本。如果太长，我想将其截断，并在行尾添加三个点，如下所示:

我在我的行中为此使用了 text-overflow: ellipsis; 属性，但无法使其正常工作。

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 中的线条拍手 Line Clamping