How to hide too long text in a twitter-bootstrap grid table?
<p>I created a bootstrap grid table which contains very long texts sometimes. Problem: if a text is too long then my table rows height changes as you can see in my example code. I want to hide the text instead.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.zeile {
  border: 1px solid red;
  overflow:hidden;
}

.row {
  margin-left: 0px;
  margin-right: 0px;
  display:table;
  width:100%;
}

.row .col-xs-2 {
  display:table-cell;
  float:none;
}

.row .col-xs-5 {
  display:table-cell;
  float:none;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/&gt;

&lt;div class="row"&gt;
  &lt;div class="col-xs-2 zeile" id="too_long"&gt;
        Very long text Very long text Very long
  &lt;/div&gt;
  &lt;div class="col-xs-5 zeile"&gt;
        Text
  &lt;/div&gt;
  &lt;div class="col-xs-5 zeile"&gt;
        Text
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="row"&gt;
  &lt;div class="col-xs-2 zeile"&gt;
        short text
  &lt;/div&gt;
  &lt;div class="col-xs-5 zeile"&gt;
        Text
  &lt;/div&gt;
  &lt;div class="col-xs-5 zeile"&gt;
        Text
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>JSFIDDLE: <a href="https://jsfiddle.net/5L2w4yvr/" rel="nofollow">https://jsfiddle.net/5L2w4yvr/</a></p>