Text Truncation

The text-truncate helper shortens long text to a single line and ends it with an ellipsis. It needs a block or inline-block element with a width limit; in flex layouts give the flexible item min-width: 0.

1Block level truncation

A block element with a max width; the dashed outline shows the limit.

Our smart reporting brings new ideas to life at a fair price. This elegant release turns new ideas to life for teams of every size.

<p class="text-truncate hp-tt mb-0" style="max-width:18rem">Our smart reporting brings new ideas to life at a fair price. This elegant release turns new ideas to life for teams of every size.</p>

2Inline-block inside a sentence

Inline elements need d-inline-block plus a max width to truncate.

Last edited by Ella Rossi and Nadia Carter yesterday.

<p class="mb-0">Last edited by <span class="d-inline-block text-truncate align-bottom hp-tt" style="max-width:8rem">Ella Rossi and Nadia Carter</span> yesterday.</p>

3Inbox preview

Subject and preview text cut to one line in an email list.

Freya AlvarezWhat's new in engineering – This focused story gives projects moving forward on any device. Our smart reporting shows every detail in view in just a few clicks.
Tariq BrennanA guide to smart reporting – This powerful update makes the whole team on the same page in just a few clicks. This fast launch turns customers coming back with friendly support.
Zoe RossiRelease notes for customers – Our workflow automation brings time back in your day without the usual hassle. The new 99.99% uptime gives your work organised without extra tools.

<ul class="list-group">
  <li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Freya Alvarez</strong><span class="text-truncate small"><span class="fw-semibold">What&#39;s new in engineering</span> &ndash; This focused story gives projects moving forward on any device. Our smart reporting shows every detail in view in just a few clicks.</span></li>
  <li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Tariq Brennan</strong><span class="text-truncate small"><span class="fw-semibold">A guide to smart reporting</span> &ndash; This powerful update makes the whole team on the same page in just a few clicks. This fast launch turns customers coming back with friendly support.</span></li>
  <li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Zoe Rossi</strong><span class="text-truncate small"><span class="fw-semibold">Release notes for customers</span> &ndash; Our workflow automation brings time back in your day without the usual hassle. The new 99.99% uptime gives your work organised without extra tools.</span></li>
</ul>

4Table cell notes

A long note column truncated with text-truncate and a max width on the cell.

Order	Note	Total
#INV-4553	The new role-based access helps you focused on what matters with friendly support.	$318.46
#PO-5879	A clear journey makes you focused on what matters without the usual hassle.	$290.25
#TX-2253	The new 99.99% uptime keeps results you can measure with friendly support.	$258.35

<div class="table-responsive">
  <table class="table mb-0">
    <thead>
      <tr>
        <th scope="col">Order</th>
        <th scope="col">Note</th>
        <th scope="col" class="text-end">Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>#INV-4553</td>
        <td class="text-truncate" style="max-width:12rem">The new role-based access helps you focused on what matters with friendly support.</td>
        <td class="text-end">$318.46</td>
      </tr>
      <tr>
        <td>#PO-5879</td>
        <td class="text-truncate" style="max-width:12rem">A clear journey makes you focused on what matters without the usual hassle.</td>
        <td class="text-end">$290.25</td>
      </tr>
      <tr>
        <td>#TX-2253</td>
        <td class="text-truncate" style="max-width:12rem">The new 99.99% uptime keeps results you can measure with friendly support.</td>
        <td class="text-end">$258.35</td>
      </tr>
    </tbody>
  </table>
</div>

5Long file names

File names shorten while the size stays visible at the end.

inside-the-bright-team-final-version-9.docx434 KB
the-elegant-process-checklist-final-version-3.docx590 KB
the-focused-release-checklist-final-version-3.docx98 KB

<ul class="list-unstyled vstack gap-2 mb-0" style="max-width:20rem">
  <li class="d-flex align-items-center gap-2"><span class="text-primary"><i class="bi bi-file-earmark-text" aria-hidden="true"></i></span><span class="text-truncate">inside-the-bright-team-final-version-9.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">434 KB</small></li>
  <li class="d-flex align-items-center gap-2"><span class="text-primary"><i class="bi bi-file-earmark-text" aria-hidden="true"></i></span><span class="text-truncate">the-elegant-process-checklist-final-version-3.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">590 KB</small></li>
  <li class="d-flex align-items-center gap-2"><span class="text-primary"><i class="bi bi-file-earmark-text" aria-hidden="true"></i></span><span class="text-truncate">the-focused-release-checklist-final-version-3.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">98 KB</small></li>
</ul>

6Breadcrumb with a long last item

The current page title truncates so the breadcrumb stays on one line.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb flex-nowrap mb-0">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Engineering</a></li>
    <li class="breadcrumb-item active text-truncate" aria-current="page">This bright experience shows results you can measure without the usual hassle.</li>
  </ol>
</nav>

7Notification preview

A toast-like card where the message preview stays on one line.

Maya Novak replied: The new audit trail guides your work organised at a fair price.27 min ago

<div class="d-flex align-items-center gap-3 border rounded p-2" style="max-width:24rem">
  <span class="fs-4 text-primary"><i class="bi bi-bell-fill" aria-hidden="true"></i></span> 
  <div class="text-truncate">
    <strong class="small d-block text-truncate">Maya Novak replied: The new audit trail guides your work organised at a fair price.</strong><small class="text-body-secondary">27 min ago</small>
  </div>
</div>

8Equal card titles

Truncated titles keep a grid of cards the same height.

Plan notes for customers: A clear routine gives every detail in view without the usual hassle.

Oct 14, 2025

Secure ways to improve your idea: This friendly goal turns new ideas to life from the very first day.

Jul 2, 2026

7 lessons from our update: Our api integrations brings you focused on what matters without the usual hassle.

Aug 8, 2026

<div class="row g-3">
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 text-truncate">Plan notes for customers: A clear routine gives every detail in view without the usual hassle.</h3>
        <p class="small text-body-secondary mb-0">Oct 14, 2025</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 text-truncate">Secure ways to improve your idea: This friendly goal turns new ideas to life from the very first day.</h3>
        <p class="small text-body-secondary mb-0">Jul 2, 2026</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 text-truncate">7 lessons from our update: Our api integrations brings you focused on what matters without the usual hassle.</h3>
        <p class="small text-body-secondary mb-0">Aug 8, 2026</p>
      </div>
    </div>
  </div>
</div>

9Chat list

In a flex row the text column needs min-width: 0 so text-truncate can shrink it.

Chloe Fischer13:45

This fast journey keeps complex tasks into simple steps without extra tools. Our api integrations brings customers coming back from the very first day.

Ava Morgan17:15

This flexible story gives time back in your day from the very first day. A smart workflow shows customers coming back without extra tools.

Kai Silva12:45

Our smart reporting brings time back in your day at a fair price. This clear community shows results you can measure on any device.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action d-flex gap-2 align-items-center"><img src="../assets/img/avatar-5.svg" alt="" width="40" height="40" class="rounded-circle">
  <div style="min-width:0" class="flex-grow-1">
    <div class="d-flex">
      <strong class="small text-truncate">Chloe Fischer</strong><small class="ms-auto ps-2 text-body-secondary">13:45</small>
    </div>
    <div class="small text-body-secondary text-truncate">
      This fast journey keeps complex tasks into simple steps without extra tools. Our api integrations brings customers coming back from the very first day.
    </div>
  </div>
  </a><a href="#" class="list-group-item list-group-item-action d-flex gap-2 align-items-center"><img src="../assets/img/avatar-11.svg" alt="" width="40" height="40" class="rounded-circle">
  <div style="min-width:0" class="flex-grow-1">
    <div class="d-flex">
      <strong class="small text-truncate">Ava Morgan</strong><small class="ms-auto ps-2 text-body-secondary">17:15</small>
    </div>
    <div class="small text-body-secondary text-truncate">
      This flexible story gives time back in your day from the very first day. A smart workflow shows customers coming back without extra tools.
    </div>
  </div>
  </a><a href="#" class="list-group-item list-group-item-action d-flex gap-2 align-items-center"><img src="../assets/img/avatar-2.svg" alt="" width="40" height="40" class="rounded-circle">
  <div style="min-width:0" class="flex-grow-1">
    <div class="d-flex">
      <strong class="small text-truncate">Kai Silva</strong><small class="ms-auto ps-2 text-body-secondary">12:45</small>
    </div>
    <div class="small text-body-secondary text-truncate">
      Our smart reporting brings time back in your day at a fair price. This clear community shows results you can measure on any device.
    </div>
  </div>
  </a>
</div>

10Long web addresses

Page addresses truncate in a link list; the full address is kept in the title attribute.

<ul class="list-unstyled vstack gap-1 mb-0" style="max-width:20rem">
  <li><a href="#" class="d-block text-truncate" title="example.com/goal/insights/getting-started-with-the-new-dashboard">example.com/update/release/getting-started-with-the-new-dashboard</a></li>
  <li><a href="#" class="d-block text-truncate" title="example.com/help/articles/how-to-reset-your-password-and-security-keys">example.com/help/articles/how-to-reset-your-password-and-security-keys</a></li>
</ul>

11Product grid names

Product names cut to one line under each image in a compact grid.

Team plan Marketing edition

$166.00

Enterprise suite Marketing edition

$379.99

Business plan Engineering edition

$149.00

Automation pack Product edition

$195.50

<div class="row g-2">
  <div class="col-6 col-md-3">
    <div class="border rounded p-2">
      <img src="../assets/img/product-1.svg" alt="" class="img-fluid rounded mb-1">
      <div class="small text-truncate">
        Team plan Marketing edition
      </div>
      <strong class="small">$166.00</strong>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="border rounded p-2">
      <img src="../assets/img/product-2.svg" alt="" class="img-fluid rounded mb-1">
      <div class="small text-truncate">
        Enterprise suite Marketing edition
      </div>
      <strong class="small">$379.99</strong>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="border rounded p-2">
      <img src="../assets/img/product-3.svg" alt="" class="img-fluid rounded mb-1">
      <div class="small text-truncate">
        Business plan Engineering edition
      </div>
      <strong class="small">$149.00</strong>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="border rounded p-2">
      <img src="../assets/img/product-4.svg" alt="" class="img-fluid rounded mb-1">
      <div class="small text-truncate">
        Automation pack Product edition
      </div>
      <strong class="small">$195.50</strong>
    </div>
  </div>
</div>

12Truncated chips

Badges with a max width so long labels never break the row.

Calm ways to improve your goalHow we rebuilt our storyHow we rebuilt our updateWhat's new in sales

<div class="d-flex flex-wrap gap-2">
  <span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">Calm ways to improve your goal</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">How we rebuilt our story</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">How we rebuilt our update</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">What&#39;s new in sales</span>
</div>

13User menu name

A long account name truncates inside the navbar button.

<nav class="navbar bg-body-tertiary rounded px-3">
  <span class="navbar-brand mb-0 h6">Brand name 8</span> 
  <button type="button" class="btn btn-light btn-sm d-flex align-items-center gap-2" style="max-width:12rem"> <img src="../assets/img/avatar-6.svg" alt="" width="24" height="24" class="rounded-circle"><span class="text-truncate">Owen Nguyen (Sales Executive)</span><i class="bi bi-chevron-down" aria-hidden="true"></i> </button>
</nav>

14Why min-width: 0 matters

Left: a flex child without min-width overflows. Right: with min-width: 0 the text truncates.

Without min-width

Our api integrations makes new ideas to life for teams of every size. This clear launch guides customers coming back without the usual hassle.

New

With min-width: 0

The new 99.99% uptime guides results you can measure without extra tools. A bright plan turns your work organised for teams of every size.

New

<div class="row g-3">
  <div class="col-sm-6">
    <p class="small fw-semibold mb-1">Without min-width</p>
    <div class="d-flex border rounded p-2 overflow-hidden">
      <div class="flex-grow-1">
        <div class="text-truncate">
          Our api integrations makes new ideas to life for teams of every size. This clear launch guides customers coming back without the usual hassle.
        </div>
      </div>
      <span class="badge text-bg-secondary ms-2">New</span>
    </div>
  </div>
  <div class="col-sm-6">
    <p class="small fw-semibold mb-1">With min-width: 0</p>
    <div class="d-flex border rounded p-2">
      <div class="flex-grow-1" style="min-width:0">
        <div class="text-truncate">
          The new 99.99% uptime guides results you can measure without extra tools. A bright plan turns your work organised for teams of every size.
        </div>
      </div>
      <span class="badge text-bg-primary ms-2">New</span>
    </div>
  </div>
</div>

15Sidebar menu

Project names in a narrow sidebar stay on one line each.

<nav class="border rounded p-2" style="max-width:14rem" aria-label="Projects">
  <ul class="nav flex-column">
    <li class="nav-item"><a class="nav-link d-flex gap-2 py-1 px-2" href="#"><i class="bi bi-folder" aria-hidden="true"></i><span class="text-truncate">Workflow automation Friendly story practical</span></a></li>
    <li class="nav-item"><a class="nav-link d-flex gap-2 py-1 px-2" href="#"><i class="bi bi-folder" aria-hidden="true"></i><span class="text-truncate">Single sign-on Practical launch clear</span></a></li>
    <li class="nav-item"><a class="nav-link d-flex gap-2 py-1 px-2" href="#"><i class="bi bi-folder" aria-hidden="true"></i><span class="text-truncate">Workflow automation Friendly update calm</span></a></li>
    <li class="nav-item"><a class="nav-link d-flex gap-2 py-1 px-2" href="#"><i class="bi bi-folder" aria-hidden="true"></i><span class="text-truncate">Secure file sharing Calm dashboard bright</span></a></li>
  </ul>
</nav>

16Kanban card titles

Narrow board columns keep task titles tidy with truncation.

To do

A guide to team analytics

Secure ways to improve your dashboard

Doing

The bright experience checklist

4 lessons from our project

Done

How we rebuilt our experience

What's new in marketing

<div class="row g-2">
  <div class="col-4">
    <div class="bg-body-tertiary rounded p-2">
      <small class="fw-semibold">To do</small>
      <div class="bg-body border rounded p-2 mt-2 small text-truncate">
        A guide to team analytics
      </div>
      <div class="bg-body border rounded p-2 mt-2 small text-truncate">
        Secure ways to improve your dashboard
      </div>
    </div>
  </div>
  <div class="col-4">
    <div class="bg-body-tertiary rounded p-2">
      <small class="fw-semibold">Doing</small>
      <div class="bg-body border rounded p-2 mt-2 small text-truncate">
        The bright experience checklist
      </div>
      <div class="bg-body border rounded p-2 mt-2 small text-truncate">
        4 lessons from our project
      </div>
    </div>
  </div>
  <div class="col-4">
    <div class="bg-body-tertiary rounded p-2">
      <small class="fw-semibold">Done</small>
      <div class="bg-body border rounded p-2 mt-2 small text-truncate">
        How we rebuilt our experience
      </div>
      <div class="bg-body border rounded p-2 mt-2 small text-truncate">
        What&#39;s new in marketing
      </div>
    </div>
  </div>
</div>

17Order summary address

A long shipping address truncated in a summary line, with an edit link.

Amara Kowalski, 446 Hillcrest Road, Kyoto 79337, Canada Change

<div class="d-flex align-items-center gap-2 border rounded p-2">
  <span class="text-body-secondary"><i class="bi bi-truck" aria-hidden="true"></i></span> <span class="text-truncate small">Amara Kowalski, 446 Hillcrest Road, Kyoto 79337, Canada</span> <a href="#" class="ms-auto small flex-shrink-0">Change</a> 
</div>

18Dropdown with a long value

The selected option truncates inside a fixed width dropdown button.

<div class="dropdown">
  <button class="btn btn-outline-secondary dropdown-toggle d-inline-flex align-items-center" type="button" id="hp-dd-1242" data-bs-toggle="dropdown" aria-expanded="false" style="max-width:14rem"> <span class="text-truncate">Smart reporting for customers</span> </button>
  <ul class="dropdown-menu" aria-labelledby="hp-dd-1242">
    <li><a class="dropdown-item" href="#">Smart reporting</a></li>
    <li><a class="dropdown-item" href="#">Workflow automation</a></li>
  </ul>
</div>

19Playlist

Long episode or track titles truncate while the duration stays aligned.

The workspace your team will actually love2:05
One platform for every workflow2:14
The workspace your team will actually love5:07

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex gap-2"><span class="text-truncate">The workspace your team will actually love</span><small class="ms-auto text-body-secondary">2:05</small></li>
  <li class="list-group-item d-flex gap-2"><span class="text-truncate">One platform for every workflow</span><small class="ms-auto text-body-secondary">2:14</small></li>
  <li class="list-group-item d-flex gap-2"><span class="text-truncate">The workspace your team will actually love</span><small class="ms-auto text-body-secondary">5:07</small></li>
</ol>

20Full text in a tooltip

Offer the complete text in a tooltip so nothing is lost when it is truncated.

The new dark mode helps complex tasks into simple steps on any device. This friendly community turns data easy to understand for teams of every size.

<span class="d-inline-block text-truncate hp-tt" style="max-width:16rem" tabindex="0" data-bs-toggle="tooltip" data-bs-title="The new dark mode helps complex tasks into simple steps on any device. This friendly community turns data easy to understand for teams of every size.">The new dark mode helps complex tasks into simple steps on any device. This friendly community turns data easy to understand for teams of every size.</span>