How to hide too long text in a twitter-bootstrap grid table?

Question

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.

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

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-xs-2 zeile" id="too_long"> Very long text Very long text Very long </div> <div class="col-xs-5 zeile"> Text </div> <div class="col-xs-5 zeile"> Text </div> </div> <div class="row"> <div class="col-xs-2 zeile"> short text </div> <div class="col-xs-5 zeile"> Text </div> <div class="col-xs-5 zeile"> Text </div> </div> 

JSFIDDLE: https://jsfiddle.net/5L2w4yvr/

Answer 1

Note: I changed the layout from the one made out of divs to the table layout.

When you are using Bootstrap it's important that you never change its original css, at least not for the grid system itself as it will most likely result in problems later.

CSS:

td
{
    max-width: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Table grid:

<table class="table table-responsive">
  <tr>
    <td class="col-xs-3">
      Test Very long text Very long text Very long Very long text Very long text Very long
    </td>
    <td class="col-xs-3">Test</td>
    <td class="col-xs-3">
      Test
    </td>
    <td class="col-xs-3">Test</td>
  </tr>
</table>

jsFiddle

Answer 2

Solution 1: it works but it has fixed width: jsfiddle

.row .col-xs-2 {
   display:table-cell;
   float:none;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

Solution 2: it works without fixed width : jsfiddle

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


  max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;


}

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

 .col-xs-5 , .col-xs-2 {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
  .col-xs-2 {
    width: 30%;
  }
  .col-xs-5  {
    width: 70%;
  }

Answer 3

Have a look

 /* 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; } .row { table-layout: fixed; } .row { table-layout: fixed; } .row .col-xs-2 { display: table-cell; float: none; width: 20%; text-overflow: ellipsis; white-space: nowrap; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-xs-2 zeile" id="too_long"> Very long text Very long text Very long </div> <div class="col-xs-5 zeile"> Text </div> <div class="col-xs-5 zeile"> Text </div> </div> <div class="row"> <div class="col-xs-2 zeile"> short text </div> <div class="col-xs-5 zeile"> Text </div> <div class="col-xs-5 zeile"> Text </div> </div> 

Answer 4

Try This

.row {
table-layout: fixed; 
}

.row .col-xs-2 {        
display: table-cell;
float: none;
width: 20%;
text-overflow: ellipsis;
white-space: nowrap;
}