How to use text-overflow inside Bootstrap column?

Question

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

Answer 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

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