How to work with ellipsis in bootstrap responsive table
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
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.
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
positionedabsolute
inside thetd
withwidth: 100%
along with aninline-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>
Another suggestion for bootstrap 4:
Github Docs
.table.table-ellipsis tbody td {
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}