Question

假设我有一个固定高度的行，我在其列中插入了一些文本。如果它太长了我想要它被切断，在线的末端应该添加三个点：

我在我的行中使用 text-overflow：省略号; 属性，但无法使其正常工作。

我做错了什么？

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

中的线条拍手

Answer 2

尝试使用js。它只显示50个字符。更新的小提琴是 - 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 3

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

public class TypePromotion {
public static void main(String args[]){
    int x = 10;
    double y = 20.0;
    double z = x + y;

    System.out.println("value of Z is :: "+z); // outputs 30.0
    System.out.println("value of X is :: "+x); // outputs 10
}}

其中“ trimText” CSS为：-

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

Output Image:

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

3 个答案: