Twitter Bootstrap Question posted in

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

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/

Tags:

4

Answers


  1. 0

    Try This 

    .row {
table-layout: fixed; 
}

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

    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

    Login or Signup to reply.
  3. 0

    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%;
  }
    Login or Signup to reply.
  4. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search