Truncate Table Text

When building tables in Bootstrap 5, sometimes your text is too long to fit neatly in a cell. Instead of breaking your layout, you can truncate the text with an ellipsis (…). In this guide, we’ll cover all the ways to do this: targeting specific cells, using Bootstrap classes, responsive solutions, and fully automatic approaches.

Why Text Truncation Needs Special Attention

The CSS property text-overflow: ellipsis is the key to truncating text. But it only works under specific conditions:

• The element must have overflow: hidden.
• The element must have white-space: nowrap.
• The element must have a fixed or constrained width.

By default, table cells (<td>) expand to fit content, which prevents truncation. So we need to control the table layout or cell width.

1. Basic Truncation for All Table Cells

The simplest approach is to truncate all cells in a table. You need to set table-layout: fixed on the table:

<table class="table table-striped">
  <thead>
    <tr>
      <th>First</th>
      <th>Second</th>
      <th>Third</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Short text</td>
      <td>Some more text</td>
      <td>Very long text that should be truncated with an ellipsis</td>
    </tr>
  </tbody>
</table>

.table {
  table-layout: fixed; /* Constrain column widths */
  width: 100%;
}

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

Now all cells in the table truncate text automatically.

2. Truncate Only a Specific Column

Sometimes you want only one column to truncate, e.g., the third column. Use the :nth-child selector:

.table {
  table-layout: fixed;
  width: 100%;
}

.table tbody td:nth-child(3) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px; /* Optional width constraint */
}

• td:nth-child(3) → selects the third column only.
• Other columns remain flexible and wrap text as usual.

3. Using Bootstrap’s .text-truncate Class

Bootstrap 5 has a built-in class .text-truncate:

<td class="text-truncate" style="max-width:150px;">
  Very long text that should be truncated
</td>

• Works inside a constrained container.
• Can be applied to specific cells without CSS changes.

4. Fully Automatic Last Column Truncation

For dynamic tables, you might want the last column to truncate automatically, no matter how many columns exist:

.table {
  table-layout: fixed;
  width: 100%;
}

.table tbody td:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

• td:last-child → targets the last column of each row.
• Works perfectly for tables generated dynamically.

Optional Responsive Width

You can assign a width in percentage to make truncation responsive:

.table tbody td:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 30%; /* last column takes 30% of table width */
}

5. Bonus: Tooltip for Full Text

Sometimes truncation hides important content. You can show the full text on hover using a title attribute or a Bootstrap tooltip:

<td
  class="text-truncate"
  style="max-width:200px;"
  title="This is the full text"
>
  Very long text that is truncated
</td>

Or with Bootstrap 5 tooltips:

<td
  class="text-truncate"
  style="max-width:200px;"
  data-bs-toggle="tooltip"
  title="This is the full text"
>
  Very long text that is truncated
</td>

• Users can hover to see the full content.
• Great for usability in tables with limited space.

Summary of Variants

Key Takeaways

1. text-overflow: ellipsis requires fixed width or table-layout fixed.
2. white-space: nowrap + overflow: hidden is mandatory.
3. Use :nth-child or :last-child to target specific columns.
4. .text-truncate is a handy Bootstrap helper for single cells.
5. Optional tooltips improve usability for truncated content.

This guide covers all practical ways to handle text truncation in Bootstrap 5 tables, from simple static tables to fully dynamic, responsive layouts.