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 calm plan shows the whole team on the same page at a fair price. Our study groups keeps customers coming back all year round.
<p class="text-truncate hp-tt mb-0" style="max-width:18rem">This calm plan shows the whole team on the same page at a fair price. Our study groups keeps customers coming back all year round.</p>2Inline-block inside a sentence
Inline elements need d-inline-block plus a max width to truncate.
Last edited by Theo Delgado and Chloe Harlow 1 days ago.
<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 Chloe Harlow</span> 1 days ago.</p>3Inbox preview
Subject and preview text cut to one line in an email list.
- Mason NguyenWhat's new in lifestyle – A powerful launch shows results you can measure from the very first day. A modern dashboard lets complex tasks into simple steps without the usual hassle.
- Tariq Ashford6 lessons from our plan – This clear release lets new ideas to life from the very first day. Our study groups keeps customers coming back without the usual hassle.
- Tariq QuinnInside the bright update – A modern project helps results you can measure from the very first day. Our online courses guides the whole team on the same page at a fair price.
<ul class="list-group">
<li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Mason Nguyen</strong><span class="text-truncate small"><span class="fw-semibold">What's new in lifestyle</span> – A powerful launch shows results you can measure from the very first day. A modern dashboard lets complex tasks into simple steps without the usual hassle.</span></li>
<li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Tariq Ashford</strong><span class="text-truncate small"><span class="fw-semibold">6 lessons from our plan</span> – This clear release lets new ideas to life from the very first day. Our study groups keeps customers coming back without the usual hassle.</span></li>
<li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Tariq Quinn</strong><span class="text-truncate small"><span class="fw-semibold">Inside the bright update</span> – A modern project helps results you can measure from the very first day. Our online courses guides the whole team on the same page 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 |
|---|---|---|
| #TX-1578 | This bright workflow helps time back in your day at a fair price. | $98.08 |
| #TX-8056 | Our online courses brings data easy to understand without the usual hassle. | $33.63 |
| #TX-1326 | This friendly dashboard guides projects moving forward from the very first day. | $108.09 |
<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>#TX-1578</td>
<td class="text-truncate" style="max-width:12rem">This bright workflow helps time back in your day at a fair price.</td>
<td class="text-end">$98.08</td>
</tr>
<tr>
<td>#TX-8056</td>
<td class="text-truncate" style="max-width:12rem">Our online courses brings data easy to understand without the usual hassle.</td>
<td class="text-end">$33.63</td>
</tr>
<tr>
<td>#TX-1326</td>
<td class="text-truncate" style="max-width:12rem">This friendly dashboard guides projects moving forward from the very first day.</td>
<td class="text-end">$108.09</td>
</tr>
</tbody>
</table>
</div>5Long file names
File names shorten while the size stays visible at the end.
- inside-the-bright-dashboard-final-version-2.docx738 KB
- inside-the-bright-community-final-version-6.docx423 KB
- what's-new-in-design-final-version-2.docx296 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-bright-dashboard-final-version-2.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">738 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">inside-the-bright-community-final-version-6.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">423 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">what's-new-in-design-final-version-2.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">296 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="#">Design</a></li>
<li class="breadcrumb-item active text-truncate" aria-current="page">A bright dashboard brings 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.
Theo Ortega replied: The new quizzes guides projects moving forward on any device.yesterday
<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">Theo Ortega replied: The new quizzes guides projects moving forward on any device.</strong><small class="text-body-secondary">yesterday</small>
</div>
</div>8Equal card titles
Truncated titles keep a grid of cards the same height.
6 lessons from our routine: A reliable routine makes every detail in view at a fair price.
Mar 17, 2026
What's new in development: The new lifetime access makes your work organised without extra tools.
Dec 19, 2025
What's new in business: The new expert mentors helps new ideas to life from the very first day.
Oct 29, 2025
<div class="row g-3">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h3 class="h6 text-truncate">6 lessons from our routine: A reliable routine makes every detail in view at a fair price.</h3>
<p class="small text-body-secondary mb-0">Mar 17, 2026</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h3 class="h6 text-truncate">What's new in development: The new lifetime access makes your work organised without extra tools.</h3>
<p class="small text-body-secondary mb-0">Dec 19, 2025</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h3 class="h6 text-truncate">What's new in business: The new expert mentors helps new ideas to life from the very first day.</h3>
<p class="small text-body-secondary mb-0">Oct 29, 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.
Zoe Larsen14:45
This powerful community makes time back in your day wherever you are. This powerful team guides the whole team on the same page without the usual hassle.
Theo Brennan17:00
The new expert mentors lets data easy to understand without extra tools. This bright team brings time back in your day in just a few clicks.
Liam Duarte15:30
The new expert mentors helps customers coming back at a fair price. Our study groups turns new ideas to life at a fair price.
<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-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">Zoe Larsen</strong><small class="ms-auto ps-2 text-body-secondary">14:45</small>
</div>
<div class="small text-body-secondary text-truncate">
This powerful community makes time back in your day wherever you are. This powerful team guides the whole team on the same page without the usual hassle.
</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-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">Theo Brennan</strong><small class="ms-auto ps-2 text-body-secondary">17:00</small>
</div>
<div class="small text-body-secondary text-truncate">
The new expert mentors lets data easy to understand without extra tools. This bright team brings 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-3.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">Liam Duarte</strong><small class="ms-auto ps-2 text-body-secondary">15:30</small>
</div>
<div class="small text-body-secondary text-truncate">
The new expert mentors helps customers coming back at a fair price. Our study groups turns new ideas to life at a fair price.
</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/community/getting-started-with-the-new-dashboard">example.com/experience/case study/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.
UX fundamentals Development edition
$147.99
Web development Business edition
$466.99
Public speaking Business edition
$456.50
Data analysis Business edition
$271.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">
UX fundamentals Development edition
</div>
<strong class="small">$147.99</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">
Web development Business edition
</div>
<strong class="small">$466.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">
Public speaking Business edition
</div>
<strong class="small">$456.50</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">
Data analysis Business edition
</div>
<strong class="small">$271.50</strong>
</div>
</div>
</div>12Truncated chips
Badges with a max width so long labels never break the row.
What's new in design9 lessons from our launchInside the practical storyWhat's new in marketing
<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">What's new in design</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">9 lessons from our launch</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">Inside the practical story</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">What's new in marketing</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 7</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-8.svg" alt="" width="24" height="24" class="rounded-circle"><span class="text-truncate">Mateo Larsen (Support Specialist)</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 focused team keeps results you can measure wherever you are. This smart story shows new ideas to life for teams of every size.
With min-width: 0
Our certificates makes data easy to understand on any device. The new hands-on projects guides you focused on what matters on any device.
<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">
A focused team keeps results you can measure wherever you are. This smart story shows new ideas to life 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 certificates makes data easy to understand on any device. The new hands-on projects guides you focused on what matters on any device.
</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">Online courses Flexible journey simple</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">Mentoring Powerful journey bright</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">Online courses Simple launch bright</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">Certificates Reliable dashboard simple</span></a></li>
</ul>
</nav>16Kanban card titles
Narrow board columns keep task titles tidy with truncation.
To do
7 lessons from our project
What's new in marketing
Doing
Inside the powerful community
7 lessons from our story
Done
What's new in business
A guide to mentoring
<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">
7 lessons from our project
</div>
<div class="bg-body border rounded p-2 mt-2 small text-truncate">
What's new in marketing
</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">
Inside the powerful community
</div>
<div class="bg-body border rounded p-2 mt-2 small text-truncate">
7 lessons from our story
</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">
What's new in business
</div>
<div class="bg-body border rounded p-2 mt-2 small text-truncate">
A guide to mentoring
</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">Elena Okafor, 100 Riverside Drive, Valencia 19865, Japan</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">Mentoring for students</span> </button>
<ul class="dropdown-menu" aria-labelledby="hp-dd-1242">
<li><a class="dropdown-item" href="#">Mentoring</a></li>
<li><a class="dropdown-item" href="#">Certificates</a></li>
</ul>
</div>19Playlist
Long episode or track titles truncate while the duration stays aligned.
- Your next career starts here3:31
- Knowledge that moves you forward4:06
- Study smarter with guided paths3:14
<ol class="list-group list-group-numbered">
<li class="list-group-item d-flex gap-2"><span class="text-truncate">Your next career starts here</span><small class="ms-auto text-body-secondary">3:31</small></li>
<li class="list-group-item d-flex gap-2"><span class="text-truncate">Knowledge that moves you forward</span><small class="ms-auto text-body-secondary">4:06</small></li>
<li class="list-group-item d-flex gap-2"><span class="text-truncate">Study smarter with guided paths</span><small class="ms-auto text-body-secondary">3:14</small></li>
</ol>20Full text in a tooltip
Offer the complete text in a tooltip so nothing is lost when it is truncated.
A powerful update helps the whole team on the same page wherever you are. Our career coaching gives every detail in view in just a few clicks.
<span class="d-inline-block text-truncate hp-tt" style="max-width:16rem" tabindex="0" data-ui-toggle="tooltip" data-ui-title="A powerful update helps the whole team on the same page wherever you are. Our career coaching gives every detail in view in just a few clicks.">A powerful update helps the whole team on the same page wherever you are. Our career coaching gives every detail in view in just a few clicks.</span>