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.

This focused plan keeps new ideas to life at a fair price. Our personal training gives complex tasks into simple steps wherever you are.

<p class="text-truncate hp-tt mb-0" style="max-width:18rem">This focused plan keeps new ideas to life at a fair price. Our personal training gives complex tasks into simple steps wherever you are.</p>

2Inline-block inside a sentence

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

Last edited by Theo Delgado and Nadia Harlow just now.

<p class="mb-0">Last edited by <span class="d-inline-block text-truncate align-bottom hp-tt" style="max-width:8rem">Theo Delgado and Nadia Harlow</span> just now.</p>

3Inbox preview

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

Kenji DuarteInside the elegant story – Our personal training keeps new ideas to life with friendly support. The new community events makes customers coming back all year round.
Ivy OrtegaA guide to recovery spa – A practical project guides you focused on what matters from the very first day. A focused team helps complex tasks into simple steps at a fair price.
Elena QuinnWhat's new in recovery – Our online coaching gives results you can measure without the usual hassle. The new progress tracking turns data easy to understand all year round.

<ul class="list-group">
  <li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Kenji Duarte</strong><span class="text-truncate small"><span class="fw-semibold">Inside the elegant story</span> &ndash; Our personal training keeps new ideas to life with friendly support. The new community events makes customers coming back all year round.</span></li>
  <li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Ivy Ortega</strong><span class="text-truncate small"><span class="fw-semibold">A guide to recovery spa</span> &ndash; A practical project guides you focused on what matters from the very first day. A focused team helps complex tasks into simple steps at a fair price.</span></li>
  <li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Elena Quinn</strong><span class="text-truncate small"><span class="fw-semibold">What&#39;s new in recovery</span> &ndash; Our online coaching gives results you can measure without the usual hassle. The new progress tracking turns data easy to understand all year round.</span></li>
</ul>

4Table cell notes

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

Order	Note	Total
#PO-3329	A practical routine gives new ideas to life in just a few clicks.	$111.22
#TX-5970	Our nutrition plans brings new ideas to life with friendly support.	$80.41
#ORD-3288	This clear idea keeps projects moving forward all year round.	$226.41

<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>#PO-3329</td>
        <td class="text-truncate" style="max-width:12rem">A practical routine gives new ideas to life in just a few clicks.</td>
        <td class="text-end">$111.22</td>
      </tr>
      <tr>
        <td>#TX-5970</td>
        <td class="text-truncate" style="max-width:12rem">Our nutrition plans brings new ideas to life with friendly support.</td>
        <td class="text-end">$80.41</td>
      </tr>
      <tr>
        <td>#ORD-3288</td>
        <td class="text-truncate" style="max-width:12rem">This clear idea keeps projects moving forward all year round.</td>
        <td class="text-end">$226.41</td>
      </tr>
    </tbody>
  </table>
</div>

5Long file names

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

update-notes-for-members-final-version-4.docx190 KB
experience-notes-for-members-final-version-2.docx497 KB
the-bright-experience-checklist-final-version-3.docx826 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">update-notes-for-members-final-version-4.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">190 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">experience-notes-for-members-final-version-2.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">497 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-bright-experience-checklist-final-version-3.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">826 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="#">Cardio</a></li>
    <li class="breadcrumb-item active text-truncate" aria-current="page">The new flexible plans connects complex tasks into simple steps from the very first day.</li>
  </ol>
</nav>

7Notification preview

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

Finn Harlow replied: Our yoga connects time back in your day on any device.23 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">Finn Harlow replied: Our yoga connects time back in your day on any device.</strong><small class="text-body-secondary">23 min ago</small>
  </div>
</div>

8Equal card titles

Truncated titles keep a grid of cards the same height.

Process notes for members: The new progress tracking keeps every detail in view in just a few clicks.

Jul 29, 2026

A guide to personal training: A fast team turns decisions quicker and clearer for teams of every size.

Jan 20, 2026

Experience notes for members: This honest routine gives your work organised in just a few clicks.

Jan 6, 2026

<div class="row g-3">
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 text-truncate">Process notes for members: The new progress tracking keeps every detail in view in just a few clicks.</h3>
        <p class="small text-body-secondary mb-0">Jul 29, 2026</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 text-truncate">A guide to personal training: A fast team turns decisions quicker and clearer for teams of every size.</h3>
        <p class="small text-body-secondary mb-0">Jan 20, 2026</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 text-truncate">Experience notes for members: This honest routine gives your work organised in just a few clicks.</h3>
        <p class="small text-body-secondary mb-0">Jan 6, 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.

Leo Ashford07:30

The new modern equipment shows time back in your day from the very first day. A friendly launch keeps time back in your day in just a few clicks.

Theo Novak16:00

This friendly workflow gives every detail in view for teams of every size. A fast community turns every detail in view in just a few clicks.

Mason Alvarez16:45

Our group classes keeps results you can measure on any device. The new progress tracking brings the whole team on the same page without the usual hassle.

<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-12.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">Leo Ashford</strong><small class="ms-auto ps-2 text-body-secondary">07:30</small>
    </div>
    <div class="small text-body-secondary text-truncate">
      The new modern equipment shows time back in your day from the very first day. A friendly launch keeps time back in your day in just a few clicks.
    </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-1.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">Theo Novak</strong><small class="ms-auto ps-2 text-body-secondary">16:00</small>
    </div>
    <div class="small text-body-secondary text-truncate">
      This friendly workflow gives every detail in view for teams of every size. A fast community turns every detail in view in just a few clicks.
    </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-6.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">Mason Alvarez</strong><small class="ms-auto ps-2 text-body-secondary">16:45</small>
    </div>
    <div class="small text-body-secondary text-truncate">
      Our group classes keeps results you can measure on any device. The new progress tracking brings the whole team on the same page without the usual hassle.
    </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/product/getting-started-with-the-new-dashboard">example.com/team/community/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.

Monthly pass Recovery edition

$42.00

Day pass HIIT edition

$92.99

Coaching plan Yoga edition

$424.00

10-class pack HIIT edition

$404.00

<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">
        Monthly pass Recovery edition
      </div>
      <strong class="small">$42.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">
        Day pass HIIT edition
      </div>
      <strong class="small">$92.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">
        Coaching plan Yoga edition
      </div>
      <strong class="small">$424.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">
        10-class pack HIIT edition
      </div>
      <strong class="small">$404.00</strong>
    </div>
  </div>
</div>

12Truncated chips

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

How we rebuilt our processHow we rebuilt our dashboardWhat's new in hiit5 lessons from our process

<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">How we rebuilt our process</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">How we rebuilt our dashboard</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">What&#39;s new in hiit</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">5 lessons from our process</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 10</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-1.svg" alt="" width="24" height="24" class="rounded-circle"><span class="text-truncate">Nora Tanaka (Project Manager)</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

This practical workflow guides the whole team on the same page in just a few clicks. The new community events makes your work organised without the usual hassle.

New

With min-width: 0

The new certified coaches brings your work organised on any device. A practical experience makes data easy to understand at a fair price.

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">
          This practical workflow guides the whole team on the same page in just a few clicks. The new community events makes your work organised 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 certified coaches brings your work organised on any device. A practical experience makes data easy to understand at a fair price.
        </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">Personal training Fast experience elegant</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">Personal training Smart idea flexible</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">Online coaching Reliable story fast</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">Online coaching Powerful routine reliable</span></a></li>
  </ul>
</nav>

16Kanban card titles

Narrow board columns keep task titles tidy with truncation.

To do

A guide to group classes

What's new in hiit

Doing

How we rebuilt our experience

8 lessons from our goal

Done

How we rebuilt our goal

What's new in hiit

<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 group classes
      </div>
      <div class="bg-body border rounded p-2 mt-2 small text-truncate">
        What&#39;s new in hiit
      </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">
        How we rebuilt our experience
      </div>
      <div class="bg-body border rounded p-2 mt-2 small text-truncate">
        8 lessons from our goal
      </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 goal
      </div>
      <div class="bg-body border rounded p-2 mt-2 small text-truncate">
        What&#39;s new in hiit
      </div>
    </div>
  </div>
</div>

17Order summary address

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

Maya Carter, 433 Hillcrest Road, Edinburgh 16285, South Africa 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">Maya Carter, 433 Hillcrest Road, Edinburgh 16285, South Africa</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-ui-toggle="dropdown" aria-expanded="false" style="max-width:14rem"> <span class="text-truncate">Nutrition plans for members</span> </button>
  <ul class="dropdown-menu" aria-labelledby="hp-dd-1242">
    <li><a class="dropdown-item" href="#">Nutrition plans</a></li>
    <li><a class="dropdown-item" href="#">Online coaching</a></li>
  </ul>
</div>

19Playlist

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

Stronger every single day5:57
Classes that keep you coming back3:14
Move more, stress less5:47

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex gap-2"><span class="text-truncate">Stronger every single day</span><small class="ms-auto text-body-secondary">5:57</small></li>
  <li class="list-group-item d-flex gap-2"><span class="text-truncate">Classes that keep you coming back</span><small class="ms-auto text-body-secondary">3:14</small></li>
  <li class="list-group-item d-flex gap-2"><span class="text-truncate">Move more, stress less</span><small class="ms-auto text-body-secondary">5:47</small></li>
</ol>

20Full text in a tooltip

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

This powerful dashboard connects you focused on what matters in just a few clicks. The new flexible plans connects results you can measure all year round.

<span class="d-inline-block text-truncate hp-tt" style="max-width:16rem" tabindex="0" data-ui-toggle="tooltip" data-ui-title="This powerful dashboard connects you focused on what matters in just a few clicks. The new flexible plans connects results you can measure all year round.">This powerful dashboard connects you focused on what matters in just a few clicks. The new flexible plans connects results you can measure all year round.</span>