title: How to use text-overflow inside Bootstrap column?
body: <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/DPt4c.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DPt4c.png" alt="enter image description here"></a></p>
  
  <p>I'm using <strong>text-overflow: ellipsis;</strong> attribute for this in my row but can't get it to work.</p>
  
  <p><a href="https://i.stack.imgur.com/3i8NE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3i8NE.png" alt="enter image description here"></a></p>
  
  <p><a href="http://jsfiddle.net/Alexnotonfire/y6oatnzy/1/" rel="nofollow noreferrer">JsFiddle</a></p>
  
  <p>What am I doing wrong?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row text"&gt;    
      &lt;div class="col-xs-4" style="border: solid"&gt;
   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!
      &lt;/div&gt;
    &lt;/div&gt;        
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.row {
      margin: 2px 0;
  }
  
  .text {
      word-wrap: break-word;
      height: 50px;
      text-overflow: ellipsis;
  }
  </code></pre>