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 disaster response connects data easy to understand at a fair price. The new tax receipts brings decisions quicker and clearer for teams of every size.

<p class="truncate hp-tt mb-0" style="max-width:18rem">Our disaster response connects data easy to understand at a fair price. The new tax receipts brings decisions quicker and clearer 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 Mia Harlow and Lea Patel 7 min ago.

<p class="mb-0">Last edited by <span class="inline-block truncate align-bottom hp-tt" style="max-width:8rem">Mia Harlow and Lea Patel</span> 7 min ago.</p>

3Inbox preview

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

Felix HarlowTeam notes for donors – The new volunteer network lets data easy to understand in just a few clicks. The new volunteer network lets new ideas to life without extra tools.
Noah NovakDashboard notes for donors – Our education fund turns projects moving forward with friendly support. The new impact tracking keeps the whole team on the same page all year round.
Maya TanakaA guide to volunteer programs – This focused project gives results you can measure from the very first day. This friendly goal brings decisions quicker and clearer in just a few clicks.

<ul class="list-group">
  <li class="list-group-item flex gap-4"><strong class="shrink-0 small" style="width:7rem">Felix Harlow</strong><span class="truncate small"><span class="font-semibold">Team notes for donors</span> &ndash; The new volunteer network lets data easy to understand in just a few clicks. The new volunteer network lets new ideas to life without extra tools.</span></li>
  <li class="list-group-item flex gap-4"><strong class="shrink-0 small" style="width:7rem">Noah Novak</strong><span class="truncate small"><span class="font-semibold">Dashboard notes for donors</span> &ndash; Our education fund turns projects moving forward with friendly support. The new impact tracking keeps the whole team on the same page all year round.</span></li>
  <li class="list-group-item flex gap-4"><strong class="shrink-0 small" style="width:7rem">Maya Tanaka</strong><span class="truncate small"><span class="font-semibold">A guide to volunteer programs</span> &ndash; This focused project gives results you can measure from the very first day. This friendly goal brings decisions quicker and clearer in just a few clicks.</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-8403	The new tax receipts connects complex tasks into simple steps for teams of every size.	$328.90
#TX-4240	This honest plan connects time back in your day without the usual hassle.	$364.64
#TX-9382	This modern process lets complex tasks into simple steps without the usual hassle.	$364.21

<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-8403</td>
        <td class="truncate" style="max-width:12rem">The new tax receipts connects complex tasks into simple steps for teams of every size.</td>
        <td class="text-end">$328.90</td>
      </tr>
      <tr>
        <td>#TX-4240</td>
        <td class="truncate" style="max-width:12rem">This honest plan connects time back in your day without the usual hassle.</td>
        <td class="text-end">$364.64</td>
      </tr>
      <tr>
        <td>#TX-9382</td>
        <td class="truncate" style="max-width:12rem">This modern process lets complex tasks into simple steps without the usual hassle.</td>
        <td class="text-end">$364.21</td>
      </tr>
    </tbody>
  </table>
</div>

5Long file names

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

how-we-rebuilt-our-story-final-version-2.docx597 KB
3-lessons-from-our-goal-final-version-7.docx841 KB
a-guide-to-education-fund-final-version-6.docx390 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" aria-hidden="true"></i></span><span class="truncate">how-we-rebuilt-our-story-final-version-2.docx</span><small class="ms-auto text-muted shrink-0">597 KB</small></li>
  <li class="flex items-center gap-2"><span class="text-primary"><i class="bi bi-file-earmark-text" aria-hidden="true"></i></span><span class="truncate">3-lessons-from-our-goal-final-version-7.docx</span><small class="ms-auto text-muted shrink-0">841 KB</small></li>
  <li class="flex items-center gap-2"><span class="text-primary"><i class="bi bi-file-earmark-text" aria-hidden="true"></i></span><span class="truncate">a-guide-to-education-fund-final-version-6.docx</span><small class="ms-auto text-muted shrink-0">390 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="#">Environment</a></li>
    <li class="breadcrumb-item active truncate" aria-current="page">A powerful project brings you focused on what matters for teams of every size.</li>
  </ol>
</nav>

7Notification preview

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

Arjun Varga replied: This calm community helps data easy to understand for teams of every size.55 min 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">Arjun Varga replied: This calm community helps data easy to understand for teams of every size.</strong><small class="text-muted">55 min ago</small>
  </div>
</div>

8Equal card titles

Truncated titles keep a grid of cards the same height.

A guide to education fund: A flexible update connects your work organised without the usual hassle.

Dec 31, 2025

9 lessons from our journey: A elegant idea brings you focused on what matters on any device.

Mar 13, 2026

A guide to volunteer programs: Our food relief lets decisions quicker and clearer at a fair price.

Oct 1, 2026

<div class="row g-3">
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 truncate">A guide to education fund: A flexible update connects your work organised without the usual hassle.</h3>
        <p class="small text-muted mb-0">Dec 31, 2025</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 truncate">9 lessons from our journey: A elegant idea brings you focused on what matters on any device.</h3>
        <p class="small text-muted mb-0">Mar 13, 2026</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 truncate">A guide to volunteer programs: Our food relief lets decisions quicker and clearer at a fair price.</h3>
        <p class="small text-muted mb-0">Oct 1, 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.

Lea Alvarez18:30

A focused routine connects data easy to understand at a fair price. Our education fund connects every detail in view at a fair price.

Priya Mensah19:00

The new local partners lets decisions quicker and clearer without extra tools. A smart plan shows new ideas to life wherever you are.

Tariq Tanaka11:00

Our disaster response lets projects moving forward at a fair price. This fast community keeps data easy to understand from the very first day.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex gap-2 items-center"><img src="../assets/img/avatar-4.svg" alt="" width="40" height="40" class="rounded-full">
  <div style="min-width:0" class="grow">
    <div class="flex">
      <strong class="small truncate">Lea Alvarez</strong><small class="ms-auto ps-2 text-muted">18:30</small>
    </div>
    <div class="small text-muted truncate">
      A focused routine connects data easy to understand at a fair price. Our education fund connects every detail in view at a fair price.
    </div>
  </div>
  </a><a href="#" class="list-group-item list-group-item-action flex gap-2 items-center"><img src="../assets/img/avatar-4.svg" alt="" width="40" height="40" class="rounded-full">
  <div style="min-width:0" class="grow">
    <div class="flex">
      <strong class="small truncate">Priya Mensah</strong><small class="ms-auto ps-2 text-muted">19:00</small>
    </div>
    <div class="small text-muted truncate">
      The new local partners lets decisions quicker and clearer without extra tools. A smart plan shows new ideas to life wherever you are.
    </div>
  </div>
  </a><a href="#" class="list-group-item list-group-item-action flex gap-2 items-center"><img src="../assets/img/avatar-7.svg" alt="" width="40" height="40" class="rounded-full">
  <div style="min-width:0" class="grow">
    <div class="flex">
      <strong class="small truncate">Tariq Tanaka</strong><small class="ms-auto ps-2 text-muted">11:00</small>
    </div>
    <div class="small text-muted truncate">
      Our disaster response lets projects moving forward at a fair price. This fast community keeps data easy to understand from the very first day.
    </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/update/insights/getting-started-with-the-new-dashboard">example.com/journey/how-to/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.

Emergency fund Animals edition

$371.00

School kit Animals edition

$447.00

Monthly gift Environment edition

$200.50

Tree planting Relief edition

$80.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">
        Emergency fund Animals edition
      </div>
      <strong class="small">$371.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">
        School kit Animals edition
      </div>
      <strong class="small">$447.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">
        Monthly gift Environment edition
      </div>
      <strong class="small">$200.50</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">
        Tree planting Relief edition
      </div>
      <strong class="small">$80.99</strong>
    </div>
  </div>
</div>

12Truncated chips

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

The friendly experience checklist6 lessons from our dashboardPractical ways to improve your teamClear ways to improve your idea

<div class="flex flex-wrap gap-2">
  <span class="badge rounded-full text-bg-light border inline-block truncate" style="max-width:9rem">The friendly experience checklist</span><span class="badge rounded-full text-bg-light border inline-block truncate" style="max-width:9rem">6 lessons from our dashboard</span><span class="badge rounded-full text-bg-light border inline-block truncate" style="max-width:9rem">Practical ways to improve your team</span><span class="badge rounded-full text-bg-light border inline-block truncate" style="max-width:9rem">Clear ways to improve your 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 11</span> 
  <button type="button" class="btn btn-light btn-sm flex items-center gap-2" style="max-width:12rem"> <img src="../assets/img/avatar-11.svg" alt="" width="24" height="24" class="rounded-full"><span class="truncate">Elena Duarte (HR Partner)</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

A simple team guides you focused on what matters on any device. Our food relief keeps time back in your day without extra tools.

New

With min-width: 0

The new secure giving turns new ideas to life for teams of every size. The new secure giving connects complex tasks into simple steps without the usual hassle.

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">
          A simple team guides you focused on what matters on any device. Our food relief keeps time back in your day 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">
          The new secure giving turns new ideas to life for teams of every size. The new secure giving connects complex tasks into simple steps without the usual hassle.
        </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" aria-hidden="true"></i><span class="truncate">Volunteer programs Practical team practical</span></a></li>
    <li class="nav-item"><a class="nav-link flex gap-2 py-1 px-2" href="#"><i class="bi bi-folder" aria-hidden="true"></i><span class="truncate">Disaster response Modern story powerful</span></a></li>
    <li class="nav-item"><a class="nav-link flex gap-2 py-1 px-2" href="#"><i class="bi bi-folder" aria-hidden="true"></i><span class="truncate">Food relief Friendly process powerful</span></a></li>
    <li class="nav-item"><a class="nav-link flex gap-2 py-1 px-2" href="#"><i class="bi bi-folder" aria-hidden="true"></i><span class="truncate">Clean water Flexible launch modern</span></a></li>
  </ul>
</nav>

16Kanban card titles

Narrow board columns keep task titles tidy with truncation.

To do

How we rebuilt our dashboard

Inside the friendly idea

Doing

Fast ways to improve your community

Flexible ways to improve your plan

Done

How we rebuilt our update

Bright ways to improve your workflow

<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">
        How we rebuilt our dashboard
      </div>
      <div class="bg-page border rounded-md p-2 mt-2 small truncate">
        Inside the friendly idea
      </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">
        Fast ways to improve your community
      </div>
      <div class="bg-page border rounded-md p-2 mt-2 small truncate">
        Flexible ways to improve your plan
      </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">
        How we rebuilt our update
      </div>
      <div class="bg-page border rounded-md p-2 mt-2 small truncate">
        Bright ways to improve your workflow
      </div>
    </div>
  </div>
</div>

17Order summary address

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

Aria Kim, 401 Cedar Lane, Denver 28507, Singapore 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">Aria Kim, 401 Cedar Lane, Denver 28507, Singapore</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">Disaster response for donors</span> </button>
  <ul class="dropdown-menu" aria-labelledby="hp-dd-1242">
    <li><a class="dropdown-item" href="#">Food relief</a></li>
    <li><a class="dropdown-item" href="#">Animal rescue</a></li>
  </ul>
</div>

19Playlist

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

Join a community that cares2:45
Small acts, big impact5:24
Together we can change lives5:35

<ol class="list-group list-group-numbered">
  <li class="list-group-item flex gap-2"><span class="truncate">Join a community that cares</span><small class="ms-auto text-muted">2:45</small></li>
  <li class="list-group-item flex gap-2"><span class="truncate">Small acts, big impact</span><small class="ms-auto text-muted">5:24</small></li>
  <li class="list-group-item flex gap-2"><span class="truncate">Together we can change lives</span><small class="ms-auto text-muted">5:35</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 volunteer network makes customers coming back in just a few clicks. Our animal rescue brings your work organised in just a few clicks.

<span class="inline-block truncate hp-tt" style="max-width:16rem" tabindex="0" data-ui-toggle="tooltip" data-ui-title="The new volunteer network makes customers coming back in just a few clicks. Our animal rescue brings your work organised in just a few clicks.">The new volunteer network makes customers coming back in just a few clicks. Our animal rescue brings your work organised in just a few clicks.</span>