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

Question

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

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

我做错了什么？

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

用js试试。它只会显示 50 个字符。更新后的 fiddle 是 - 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);
        }  
    });   
});

Answer 2

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

中的拍手

Answer 3

定义您的 CSS class 并将其分配给 div，您在其中分配 col 大小，例如：-

<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" CSS 是：-

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

Output Image:

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

How to use text-overflow inside Bootstrap column?

css

overflow

twitter-bootstrap

twitter-bootstrap-3