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 flexible project connects customers coming back at a fair price. This modern experience gives results you can measure at a fair price.
<p class="text-truncate hp-tt mb-0" style="max-width:18rem">This flexible project connects customers coming back at a fair price. This modern experience gives results you can measure at a fair price.</p>2Inline-block inside a sentence
Inline elements need d-inline-block plus a max width to truncate.
Last edited by Samir Whitaker and Nadia Sato 48 min ago.
<p class="mb-0">Last edited by <span class="d-inline-block text-truncate align-bottom hp-tt" style="max-width:8rem">Samir Whitaker and Nadia Sato</span> 48 min ago.</p>3Inbox preview
Subject and preview text cut to one line in an email list.
- Zoe AshfordGoal notes for patients – Our general practice shows results you can measure at a fair price. This simple release connects new ideas to life without extra tools.
- Priya DelgadoWhat's new in pediatrics – This bright idea turns you focused on what matters without the usual hassle. A friendly launch shows customers coming back all year round.
- Samir IbrahimHow we rebuilt our team – This powerful workflow lets decisions quicker and clearer in just a few clicks. Our dental care helps your work organised wherever you are.
<ul class="list-group">
<li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Zoe Ashford</strong><span class="text-truncate small"><span class="fw-semibold">Goal notes for patients</span> – Our general practice shows results you can measure at a fair price. This simple release connects new ideas to life without extra tools.</span></li>
<li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Priya Delgado</strong><span class="text-truncate small"><span class="fw-semibold">What's new in pediatrics</span> – This bright idea turns you focused on what matters without the usual hassle. A friendly launch shows 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">Samir Ibrahim</strong><span class="text-truncate small"><span class="fw-semibold">How we rebuilt our team</span> – This powerful workflow lets decisions quicker and clearer in just a few clicks. Our dental care helps your work organised wherever you are.</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-6763 | This secure process helps every detail in view at a fair price. | $289.49 |
| #TX-1183 | This fast launch turns projects moving forward at a fair price. | $154.45 |
| #PO-1385 | A calm goal connects customers coming back without the usual hassle. | $297.39 |
<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-6763</td>
<td class="text-truncate" style="max-width:12rem">This secure process helps every detail in view at a fair price.</td>
<td class="text-end">$289.49</td>
</tr>
<tr>
<td>#TX-1183</td>
<td class="text-truncate" style="max-width:12rem">This fast launch turns projects moving forward at a fair price.</td>
<td class="text-end">$154.45</td>
</tr>
<tr>
<td>#PO-1385</td>
<td class="text-truncate" style="max-width:12rem">A calm goal connects customers coming back without the usual hassle.</td>
<td class="text-end">$297.39</td>
</tr>
</tbody>
</table>
</div>5Long file names
File names shorten while the size stays visible at the end.
- inside-the-elegant-dashboard-final-version-3.docx284 KB
- how-we-rebuilt-our-process-final-version-3.docx29 KB
- a-guide-to-lab-tests-final-version-9.docx831 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-fill" aria-hidden="true"></i></span><span class="text-truncate">inside-the-elegant-dashboard-final-version-3.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">284 KB</small></li>
<li class="d-flex align-items-center gap-2"><span class="text-primary"><i class="bi bi-file-earmark-text-fill" aria-hidden="true"></i></span><span class="text-truncate">how-we-rebuilt-our-process-final-version-3.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">29 KB</small></li>
<li class="d-flex align-items-center gap-2"><span class="text-primary"><i class="bi bi-file-earmark-text-fill" aria-hidden="true"></i></span><span class="text-truncate">a-guide-to-lab-tests-final-version-9.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">831 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="#">Dermatology</a></li>
<li class="breadcrumb-item active text-truncate" aria-current="page">The new certified specialists makes customers coming back from the very first day.</li>
</ol>
</nav>7Notification preview
A toast-like card where the message preview stays on one line.
Priya Carter replied: The new certified specialists connects the whole team on the same page without extra tools.just now
<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">Priya Carter replied: The new certified specialists connects the whole team on the same page without extra tools.</strong><small class="text-body-secondary">just now</small>
</div>
</div>8Equal card titles
Truncated titles keep a grid of cards the same height.
Project notes for patients: A reliable project keeps the whole team on the same page without extra tools.
Jun 15, 2026
Inside the elegant team: Our physiotherapy turns time back in your day from the very first day.
Jun 26, 2026
Inside the practical community: Our health check-ups shows time back in your day at a fair price.
May 23, 2026
<div class="row g-3">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h3 class="h6 text-truncate">Project notes for patients: A reliable project keeps the whole team on the same page without extra tools.</h3>
<p class="small text-body-secondary mb-0">Jun 15, 2026</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h3 class="h6 text-truncate">Inside the elegant team: Our physiotherapy turns time back in your day from the very first day.</h3>
<p class="small text-body-secondary mb-0">Jun 26, 2026</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h3 class="h6 text-truncate">Inside the practical community: Our health check-ups shows time back in your day at a fair price.</h3>
<p class="small text-body-secondary mb-0">May 23, 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.
Elena Ashford08:00
This smart release gives your work organised on any device. A flexible team makes your work organised on any device.
Ella Moreau12:30
This flexible journey keeps customers coming back for teams of every size. A calm goal brings decisions quicker and clearer wherever you are.
Priya Morgan15:15
Our health check-ups gives projects moving forward for teams of every size. Our dental care gives decisions quicker and clearer for teams of every size.
<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-8.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">Elena Ashford</strong><small class="ms-auto ps-2 text-body-secondary">08:00</small>
</div>
<div class="small text-body-secondary text-truncate">
This smart release gives your work organised on any device. A flexible team makes your work organised on any device.
</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-10.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">Ella Moreau</strong><small class="ms-auto ps-2 text-body-secondary">12:30</small>
</div>
<div class="small text-body-secondary text-truncate">
This flexible journey keeps customers coming back for teams of every size. A calm goal brings decisions quicker and clearer wherever you are.
</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">Priya Morgan</strong><small class="ms-auto ps-2 text-body-secondary">15:15</small>
</div>
<div class="small text-body-secondary text-truncate">
Our health check-ups gives projects moving forward for teams of every size. Our dental care gives decisions quicker and clearer for teams of every size.
</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/team/product/getting-started-with-the-new-dashboard">example.com/dashboard/product/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.
Vaccination Dental edition
$33.00
Annual check-up Orthopedics edition
$290.00
Blood test Cardiology edition
$405.99
Dental cleaning Orthopedics edition
$381.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">
Vaccination Dental edition
</div>
<strong class="small">$33.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">
Annual check-up Orthopedics edition
</div>
<strong class="small">$290.00</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">
Blood test Cardiology edition
</div>
<strong class="small">$405.99</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">
Dental cleaning Orthopedics edition
</div>
<strong class="small">$381.50</strong>
</div>
</div>
</div>12Truncated chips
Badges with a max width so long labels never break the row.
Fast ways to improve your idea7 lessons from our projectA guide to lab testsUpdate notes for patients
<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">Fast ways to improve your idea</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">7 lessons from our project</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">A guide to lab tests</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">Update notes for patients</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 1</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-12.svg" alt="" width="24" height="24" class="rounded-circle"><span class="text-truncate">Kenji Ibrahim (Finance Lead)</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 flexible routine guides time back in your day from the very first day. A focused release turns decisions quicker and clearer for teams of every size.
With min-width: 0
Our lab tests brings time back in your day at a fair price. A reliable workflow shows projects moving forward at a fair price.
<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 flexible routine guides time back in your day from the very first day. A focused release turns decisions quicker and clearer for teams of every size.
</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">
Our lab tests brings time back in your day at a fair price. A reliable workflow shows projects moving forward 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-fill" aria-hidden="true"></i><span class="text-truncate">Telehealth Calm plan modern</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-fill" aria-hidden="true"></i><span class="text-truncate">Dental care Secure process 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-fill" aria-hidden="true"></i><span class="text-truncate">Physiotherapy Friendly team 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-fill" aria-hidden="true"></i><span class="text-truncate">Telehealth Powerful experience secure</span></a></li>
</ul>
</nav>16Kanban card titles
Narrow board columns keep task titles tidy with truncation.
To do
A guide to general practice
What's new in dermatology
Doing
What's new in pediatrics
Honest ways to improve your release
Done
The flexible community checklist
Honest ways to improve your launch
<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 general practice
</div>
<div class="bg-body border rounded p-2 mt-2 small text-truncate">
What's new in dermatology
</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">
What's new in pediatrics
</div>
<div class="bg-body border rounded p-2 mt-2 small text-truncate">
Honest ways to improve your release
</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">
The flexible community checklist
</div>
<div class="bg-body border rounded p-2 mt-2 small text-truncate">
Honest ways to improve your launch
</div>
</div>
</div>
</div>17Order summary address
A long shipping address truncated in a summary line, with an edit link.
<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">Arjun Harlow, 291 Lakeview Terrace, Kyoto 71112, 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-ui-toggle="dropdown" aria-expanded="false" style="max-width:14rem"> <span class="text-truncate">Dental care for patients</span> </button>
<ul class="dropdown-menu" aria-labelledby="hp-dd-1242">
<li><a class="dropdown-item" href="#">Lab tests</a></li>
<li><a class="dropdown-item" href="#">General practice</a></li>
</ul>
</div>19Playlist
Long episode or track titles truncate while the duration stays aligned.
- Care that puts you first2:36
- Modern healthcare close to home5:45
- Feel better with expert care4:01
<ol class="list-group list-group-numbered">
<li class="list-group-item d-flex gap-2"><span class="text-truncate">Care that puts you first</span><small class="ms-auto text-body-secondary">2:36</small></li>
<li class="list-group-item d-flex gap-2"><span class="text-truncate">Modern healthcare close to home</span><small class="ms-auto text-body-secondary">5:45</small></li>
<li class="list-group-item d-flex gap-2"><span class="text-truncate">Feel better with expert care</span><small class="ms-auto text-body-secondary">4:01</small></li>
</ol>20Full text in a tooltip
Offer the complete text in a tooltip so nothing is lost when it is truncated.
This modern goal turns complex tasks into simple steps all year round. Our telehealth lets data easy to understand wherever you are.
<span class="d-inline-block text-truncate hp-tt" style="max-width:16rem" tabindex="0" data-ui-toggle="tooltip" data-ui-title="This modern goal turns complex tasks into simple steps all year round. Our telehealth lets data easy to understand wherever you are.">This modern goal turns complex tasks into simple steps all year round. Our telehealth lets data easy to understand wherever you are.</span>