How to work with ellipsis in bootstrap responsive table

Question

In a responsive table text-overflow:ellipsis is not working when the data increases in the th (as the col-xs-2 width increases).

Code below:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th class="col-xs-2" style="text-overflow: ellipsis;">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</th>
        <th class="col-xs-1">Firstname</th>
        <th class="col-xs-1"> Lastname</th>
        <th class="col-xs-4">Age</th>
        <th class="col-xs-2">City</th>
        <th class="col-xs-2">Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
      </tr>
    </tbody>
  </table>
</div>

kukkuz · Accepted Answer · 2019-02-17T14:33:56.093

The text-overflow property only affects content that is overflowing a block container element in its inline progression direction MDN

For text-overflow to work, specifying text-overflow: ellipsis alone will not do any good - you should use the following styles together:

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

span, div, th, td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100px;
}

<span>Inline element overflow ellipsis do not work</span>
<div>Block elements overflow ellipsis works</div>
<table>
  <tr><th>Table - Overflow test</th></tr>
  <tr><td>This is a long text</td><td>This is a long text</td></tr>
</table>

Text Overflow in Table Layout

So text-overflow applies to block elements but td is a table-cell element - tables are always tricky to deal with because they are rendered using the default table layout algorithm. The widths of the table and its cells are adjusted to fit their content.

Normally specifying the usual property for getting ellipsis may work:
```
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
```

If they do not work or you begin to see the table algorithm do tricks on you, then you can use them along with max-width: 0

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

.table .text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th class="col-xs-2 text">
          Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
          </th>
          <th class="col-xs-1">Firstname</th>
          <th class="col-xs-1">Lastname</th>
          <th class="col-xs-4">Age</th>
          <th class="col-xs-2">City</th>
          <th class="col-xs-2">Country</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
        </tr>
      </tbody>
    </table>
  </div>

Another hack is to wrap the text in a span positioned absolute inside the td with width: 100% along with an inline-block pseudo element.

.table .text {
  position: relative;
}

.table .text span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: absolute;
  width: 100%;
}

.text:before {
  content: '';
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th class="col-xs-2 text">
            <span>
          Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</span>
          </th>
          <th class="col-xs-1">Firstname</th>
          <th class="col-xs-1">Lastname</th>
          <th class="col-xs-4">Age</th>
          <th class="col-xs-2">City</th>
          <th class="col-xs-2">Country</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
        </tr>
      </tbody>
    </table>
  </div>

line-height:1;-webkit-line-clamp:1;-webkit-box-orient: vertical; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; — Sibaram Sahu, Aug 26 '16 at 10:31
Nice trick about using position relative and absolute. My scenario was a little different but still worked. Thanks — Augusto Barreto, Aug 02 '19 at 14:42
nice! Solution #2 did the trick for me. I wanted to not set the max-width of table or cells to anything constraining, as I wanted them to grow/shrink with the table. Not sure why it works, but adding `max-width: 0;` like you said, did the job. — Jiveman, Feb 27 '20 at 21:03

yeahlad · Answer 2 · 2020-02-06T00:59:45.970

30

As of Bootstrap 4 you can do the following using the .text-truncate class.

<th class="col-xs-2 d-inline-block text-truncate" style="max-width: 150px;">

More details found at https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow

edited Feb 06 '20 at 00:59

answered Nov 02 '17 at 01:19

yeahlad

563
6
14

But if you have your table width set to fill the available width space (width: 100%), then this would constrain the cell width, rather than make it possible to grow and shrink with the table. @kukkuz's solution #2 worked for me. – Jiveman Feb 27 '20 at 21:01

score 7 · Answer 3 · edited Jul 23 '19 at 00:52

7

With Bootstrap 4, you can use the .text-truncate class. It automatically adds these styles for the relevant components.

.text-truncate{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

then you can set the max-width for the element to get more reliable output.

edited Jul 23 '19 at 00:52

Greg Kaleka

1,942
1
15
32

answered Jul 22 '19 at 23:51

Lasantha

81
1
4

score 1 · Answer 4 · edited Feb 05 '20 at 09:30

1

Another suggestion for bootstrap 4:

Github Docs

.table.table-ellipsis tbody td {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

edited Feb 05 '20 at 09:30

Kondal

2,870
5
26
40

answered Feb 13 '19 at 13:04

Tom John

783
5
14

score 0 · Answer 5 · answered Sep 23 '22 at 17:33

In Bootstrap 5, you can do as others have mentioned by adding the text-truncate class to a <td>, for example:

<td class="text-truncate" style="max-width: 50px;">Some super long text...</td>

To show the full text, add this CSS style to show the text on hover:

tr > td:hover {
    overflow: visible;
    white-space: unset;
}

How to work with ellipsis in bootstrap responsive table

5 Answers5

Linked

Related