How to use text-overflow inside Bootstrap column?

问题

Suppose I have a row with fixed height and I inserted some text to its column. If it's too long I wanna it to be cut off and at the end of the line three dots supposed to be added like this:

I'm using text-overflow: ellipsis; attribute for this in my row but can't get it to work.

JsFiddle

What am I doing wrong?

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

回答1:

If you want to do this using css, then try below code :

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

For understanding line clapming in css Line Clamping

回答2:

Define your CSS class and assign it to div where your are assigning col size like:-

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

where "trimText" CSS is:-

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

Output Image:

回答3:

Try it doing using js. It will show till 50 chars only. Updated fiddle is - 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);
        }  
    });   
});

来源：https://stackoverflow.com/questions/33165066/how-to-use-text-overflow-inside-bootstrap-column

标签

css

twitter-bootstrap

css3

twitter-bootstrap-3

overflow