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 speaker management gives data easy to understand wherever you are. Our speaker management keeps you focused on what matters for teams of every size.

<p class="truncate hp-tt mb-0" style="max-width:18rem">Our speaker management gives data easy to understand wherever you are. Our speaker management keeps you focused on what matters 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 Lucas Delgado and Lea Ibrahim just now.

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

3Inbox preview

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

Liam OrtegaThe secure project checklist – A flexible launch brings complex tasks into simple steps all year round. The new hands-on workshops gives decisions quicker and clearer without extra tools.
Aria RossiA guide to live streaming – The new world-class speakers turns projects moving forward from the very first day. Our venue booking lets time back in your day with friendly support.
Ethan WhitakerCommunity notes for attendees – The new networking lounges helps time back in your day for teams of every size. The new recorded sessions lets decisions quicker and clearer at a fair price.

<ul class="list-group">
  <li class="list-group-item flex gap-4"><strong class="shrink-0 small" style="width:7rem">Liam Ortega</strong><span class="truncate small"><span class="font-semibold">The secure project checklist</span> &ndash; A flexible launch brings complex tasks into simple steps all year round. The new hands-on workshops gives decisions quicker and clearer without extra tools.</span></li>
  <li class="list-group-item flex gap-4"><strong class="shrink-0 small" style="width:7rem">Aria Rossi</strong><span class="truncate small"><span class="font-semibold">A guide to live streaming</span> &ndash; The new world-class speakers turns projects moving forward from the very first day. Our venue booking lets time back in your day with friendly support.</span></li>
  <li class="list-group-item flex gap-4"><strong class="shrink-0 small" style="width:7rem">Ethan Whitaker</strong><span class="truncate small"><span class="font-semibold">Community notes for attendees</span> &ndash; The new networking lounges helps time back in your day for teams of every size. The new recorded sessions lets decisions quicker and clearer at a fair price.</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-7046	Our venue booking helps results you can measure at a fair price.	$129.64
#INV-1220	The new networking lounges shows your work organised in just a few clicks.	$256.57
#INV-2893	This bright release turns new ideas to life at a fair price.	$400.76

<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-7046</td>
        <td class="truncate" style="max-width:12rem">Our venue booking helps results you can measure at a fair price.</td>
        <td class="text-end">$129.64</td>
      </tr>
      <tr>
        <td>#INV-1220</td>
        <td class="truncate" style="max-width:12rem">The new networking lounges shows your work organised in just a few clicks.</td>
        <td class="text-end">$256.57</td>
      </tr>
      <tr>
        <td>#INV-2893</td>
        <td class="truncate" style="max-width:12rem">This bright release turns new ideas to life at a fair price.</td>
        <td class="text-end">$400.76</td>
      </tr>
    </tbody>
  </table>
</div>

5Long file names

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

story-notes-for-attendees-final-version-5.docx831 KB
inside-the-bright-experience-final-version-3.docx670 KB
release-notes-for-attendees-final-version-9.docx848 KB

<ul class="list-unstyled vstack gap-2 mb-0" style="max-width:20rem">
  <li class="flex items-center gap-2"><span class="text-primary"><i class="bi bi-file-earmark-text-fill" aria-hidden="true"></i></span><span class="truncate">story-notes-for-attendees-final-version-5.docx</span><small class="ms-auto text-muted shrink-0">831 KB</small></li>
  <li class="flex items-center gap-2"><span class="text-primary"><i class="bi bi-file-earmark-text-fill" aria-hidden="true"></i></span><span class="truncate">inside-the-bright-experience-final-version-3.docx</span><small class="ms-auto text-muted shrink-0">670 KB</small></li>
  <li class="flex items-center gap-2"><span class="text-primary"><i class="bi bi-file-earmark-text-fill" aria-hidden="true"></i></span><span class="truncate">release-notes-for-attendees-final-version-9.docx</span><small class="ms-auto text-muted shrink-0">848 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="#">Workshop</a></li>
    <li class="breadcrumb-item active truncate" aria-current="page">Our networking app lets projects moving forward in just a few clicks.</li>
  </ol>
</nav>

7Notification preview

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

Diego Ashford replied: The new networking lounges gives your work organised without the usual hassle.4 days ago

<div class="flex items-center gap-4 border rounded-md p-2" style="max-width:24rem">
  <span class="text-xl text-primary"><i class="bi bi-bell-fill" aria-hidden="true"></i></span> 
  <div class="truncate">
    <strong class="small block truncate">Diego Ashford replied: The new networking lounges gives your work organised without the usual hassle.</strong><small class="text-muted">4 days ago</small>
  </div>
</div>

8Equal card titles

Truncated titles keep a grid of cards the same height.

How we rebuilt our plan: This secure process connects decisions quicker and clearer in just a few clicks.

Sep 18, 2026

What's new in webinar: Our sponsorship lets results you can measure with friendly support.

Sep 17, 2026

How we rebuilt our team: A smart process helps customers coming back in just a few clicks.

Dec 28, 2025

<div class="row g-3">
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 truncate">How we rebuilt our plan: This secure process connects decisions quicker and clearer in just a few clicks.</h3>
        <p class="small text-muted mb-0">Sep 18, 2026</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 truncate">What&#39;s new in webinar: Our sponsorship lets results you can measure with friendly support.</h3>
        <p class="small text-muted mb-0">Sep 17, 2026</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 truncate">How we rebuilt our team: A smart process helps customers coming back in just a few clicks.</h3>
        <p class="small text-muted mb-0">Dec 28, 2025</p>
      </div>
    </div>
  </div>
</div>

9Chat list

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

Omar Carter19:30

Our sponsorship shows customers coming back wherever you are. The new certificates guides projects moving forward on any device.

Mateo Tanaka15:45

The new world-class speakers keeps your work organised on any device. This focused update turns results you can measure all year round.

Leo Hughes12:15

The new hands-on workshops guides results you can measure without the usual hassle. A modern dashboard guides results you can measure without the usual hassle.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex gap-2 items-center"><img src="../assets/img/avatar-10.svg" alt="" width="40" height="40" class="rounded-full">
  <div style="min-width:0" class="grow">
    <div class="flex">
      <strong class="small truncate">Omar Carter</strong><small class="ms-auto ps-2 text-muted">19:30</small>
    </div>
    <div class="small text-muted truncate">
      Our sponsorship shows customers coming back wherever you are. The new certificates guides projects moving forward on any device.
    </div>
  </div>
  </a><a href="#" class="list-group-item list-group-item-action flex gap-2 items-center"><img src="../assets/img/avatar-2.svg" alt="" width="40" height="40" class="rounded-full">
  <div style="min-width:0" class="grow">
    <div class="flex">
      <strong class="small truncate">Mateo Tanaka</strong><small class="ms-auto ps-2 text-muted">15:45</small>
    </div>
    <div class="small text-muted truncate">
      The new world-class speakers keeps your work organised on any device. This focused update turns results you can measure all year round.
    </div>
  </div>
  </a><a href="#" class="list-group-item list-group-item-action flex gap-2 items-center"><img src="../assets/img/avatar-12.svg" alt="" width="40" height="40" class="rounded-full">
  <div style="min-width:0" class="grow">
    <div class="flex">
      <strong class="small truncate">Leo Hughes</strong><small class="ms-auto ps-2 text-muted">12:15</small>
    </div>
    <div class="small text-muted truncate">
      The new hands-on workshops guides results you can measure without the usual hassle. A modern dashboard guides results you can measure 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="block truncate" title="example.com/process/guide/getting-started-with-the-new-dashboard">example.com/team/news/getting-started-with-the-new-dashboard</a></li>
  <li><a href="#" class="block 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.

Group bundle Meetup edition

$66.00

Virtual pass Meetup edition

$249.00

Workshop ticket Meetup edition

$145.99

Full access pass Workshop edition

$258.99

<div class="row g-2">
  <div class="col-6 col-md-3">
    <div class="border rounded-md p-2">
      <img src="../assets/img/product-1.svg" alt="" class="img-fluid rounded-md mb-1">
      <div class="small truncate">
        Group bundle Meetup edition
      </div>
      <strong class="small">$66.00</strong>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="border rounded-md p-2">
      <img src="../assets/img/product-2.svg" alt="" class="img-fluid rounded-md mb-1">
      <div class="small truncate">
        Virtual pass Meetup edition
      </div>
      <strong class="small">$249.00</strong>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="border rounded-md p-2">
      <img src="../assets/img/product-3.svg" alt="" class="img-fluid rounded-md mb-1">
      <div class="small truncate">
        Workshop ticket Meetup edition
      </div>
      <strong class="small">$145.99</strong>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="border rounded-md p-2">
      <img src="../assets/img/product-4.svg" alt="" class="img-fluid rounded-md mb-1">
      <div class="small truncate">
        Full access pass Workshop edition
      </div>
      <strong class="small">$258.99</strong>
    </div>
  </div>
</div>

12Truncated chips

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

How we rebuilt our teamThe bright goal checklistThe powerful idea checklistHow we rebuilt our idea

<div class="flex flex-wrap gap-2">
  <span class="badge rounded-full text-bg-light border inline-block truncate" style="max-width:9rem">How we rebuilt our team</span><span class="badge rounded-full text-bg-light border inline-block truncate" style="max-width:9rem">The bright goal checklist</span><span class="badge rounded-full text-bg-light border inline-block truncate" style="max-width:9rem">The powerful idea checklist</span><span class="badge rounded-full text-bg-light border inline-block truncate" style="max-width:9rem">How we rebuilt our idea</span>
</div>

13User menu name

A long account name truncates inside the navbar button.

<nav class="navbar bg-surface-3 rounded-md px-4">
  <span class="navbar-brand mb-0 h6">Brand name 20</span> 
  <button type="button" class="btn btn-light btn-sm flex items-center gap-2" style="max-width:12rem"> <img src="../assets/img/avatar-7.svg" alt="" width="24" height="24" class="rounded-full"><span class="truncate">Priya Varga (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

This elegant release makes every detail in view in just a few clicks. The new recorded sessions gives you focused on what matters without extra tools.

New

With min-width: 0

Our speaker management connects new ideas to life all year round. A simple experience lets complex tasks into simple steps all year round.

New

<div class="row g-3">
  <div class="col-sm-6">
    <p class="small font-semibold mb-1">Without min-width</p>
    <div class="flex border rounded-md p-2 overflow-hidden">
      <div class="grow">
        <div class="truncate">
          This elegant release makes every detail in view in just a few clicks. The new recorded sessions gives you focused on what matters without extra tools.
        </div>
      </div>
      <span class="badge text-bg-secondary ms-2">New</span>
    </div>
  </div>
  <div class="col-sm-6">
    <p class="small font-semibold mb-1">With min-width: 0</p>
    <div class="flex border rounded-md p-2">
      <div class="grow" style="min-width:0">
        <div class="truncate">
          Our speaker management connects new ideas to life all year round. A simple experience lets complex tasks into simple steps all year round.
        </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-md p-2" style="max-width:14rem" aria-label="Projects">
  <ul class="nav flex-col">
    <li class="nav-item"><a class="nav-link flex gap-2 py-1 px-2" href="#"><i class="bi bi-folder-fill" aria-hidden="true"></i><span class="truncate">Live streaming Friendly routine flexible</span></a></li>
    <li class="nav-item"><a class="nav-link flex gap-2 py-1 px-2" href="#"><i class="bi bi-folder-fill" aria-hidden="true"></i><span class="truncate">Sponsorship Modern project focused</span></a></li>
    <li class="nav-item"><a class="nav-link flex gap-2 py-1 px-2" href="#"><i class="bi bi-folder-fill" aria-hidden="true"></i><span class="truncate">Sponsorship Practical workflow smart</span></a></li>
    <li class="nav-item"><a class="nav-link flex gap-2 py-1 px-2" href="#"><i class="bi bi-folder-fill" aria-hidden="true"></i><span class="truncate">Live streaming Flexible story smart</span></a></li>
  </ul>
</nav>

16Kanban card titles

Narrow board columns keep task titles tidy with truncation.

To do

What's new in panel

Project notes for attendees

Doing

6 lessons from our process

A guide to venue booking

Done

Modern ways to improve your dashboard

How we rebuilt our update

<div class="row g-2">
  <div class="col-4">
    <div class="bg-surface-3 rounded-md p-2">
      <small class="font-semibold">To do</small>
      <div class="bg-page border rounded-md p-2 mt-2 small truncate">
        What&#39;s new in panel
      </div>
      <div class="bg-page border rounded-md p-2 mt-2 small truncate">
        Project notes for attendees
      </div>
    </div>
  </div>
  <div class="col-4">
    <div class="bg-surface-3 rounded-md p-2">
      <small class="font-semibold">Doing</small>
      <div class="bg-page border rounded-md p-2 mt-2 small truncate">
        6 lessons from our process
      </div>
      <div class="bg-page border rounded-md p-2 mt-2 small truncate">
        A guide to venue booking
      </div>
    </div>
  </div>
  <div class="col-4">
    <div class="bg-surface-3 rounded-md p-2">
      <small class="font-semibold">Done</small>
      <div class="bg-page border rounded-md p-2 mt-2 small truncate">
        Modern ways to improve your dashboard
      </div>
      <div class="bg-page border rounded-md p-2 mt-2 small truncate">
        How we rebuilt our update
      </div>
    </div>
  </div>
</div>

17Order summary address

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

Mateo Hughes, 167 Riverside Drive, Porto 32942, Ireland Change

<div class="flex items-center gap-2 border rounded-md p-2">
  <span class="text-muted"><i class="bi bi-truck" aria-hidden="true"></i></span> <span class="truncate small">Mateo Hughes, 167 Riverside Drive, Porto 32942, Ireland</span> <a href="#" class="ms-auto small 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 inline-flex items-center" type="button" id="hp-dd-1242" data-ui-toggle="dropdown" aria-expanded="false" style="max-width:14rem"> <span class="truncate">Networking app for attendees</span> </button>
  <ul class="dropdown-menu" aria-labelledby="hp-dd-1242">
    <li><a class="dropdown-item" href="#">Venue booking</a></li>
    <li><a class="dropdown-item" href="#">Speaker management</a></li>
  </ul>
</div>

19Playlist

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

Join the conference of the year2:48
Learn, connect and get inspired4:49
Learn, connect and get inspired3:17

<ol class="list-group list-group-numbered">
  <li class="list-group-item flex gap-2"><span class="truncate">Join the conference of the year</span><small class="ms-auto text-muted">2:48</small></li>
  <li class="list-group-item flex gap-2"><span class="truncate">Learn, connect and get inspired</span><small class="ms-auto text-muted">4:49</small></li>
  <li class="list-group-item flex gap-2"><span class="truncate">Learn, connect and get inspired</span><small class="ms-auto text-muted">3:17</small></li>
</ol>

20Full text in a tooltip

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

Our ticketing guides decisions quicker and clearer wherever you are. This honest routine turns you focused on what matters all year round.

<span class="inline-block truncate hp-tt" style="max-width:16rem" tabindex="0" data-ui-toggle="tooltip" data-ui-title="Our ticketing guides decisions quicker and clearer wherever you are. This honest routine turns you focused on what matters all year round.">Our ticketing guides decisions quicker and clearer wherever you are. This honest routine turns you focused on what matters all year round.</span>