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.
Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right.
<p class="text-truncate hp-tt mb-0" style="max-width:18rem">Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right.</p>2Inline-block inside a sentence
Inline elements need d-inline-block plus a max width to truncate.
Last edited by Jonah Kowalski and Luna Delgado 20 hours ago.
<p class="mb-0">Last edited by <span class="d-inline-block text-truncate align-bottom hp-tt" style="max-width:8rem">Jonah Kowalski and Luna Delgado</span> 20 hours ago.</p>3Inbox preview
Subject and preview text cut to one line in an email list.
- Theo SatoFive things we learned this year – Set approval rules for large payments and see who spent what, and why. We measure success by how many members come back and tell their friends.
- Ivy NovakHow to choose the right account – Invoices go out with a payment link, so customers can pay you in one click. Cash flow forecasts show where you will be next month, not just today.
- Ruby HarlowBudgeting basics for small teams – No monthly fees on the basic plan and no hidden charges on transfers. Payroll runs on time, with tax and pension payments handled for you.
<ul class="list-group">
<li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Theo Sato</strong><span class="text-truncate small"><span class="fw-semibold">Five things we learned this year</span> – Set approval rules for large payments and see who spent what, and why. We measure success by how many members come back and tell their friends.</span></li>
<li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Ivy Novak</strong><span class="text-truncate small"><span class="fw-semibold">How to choose the right account</span> – Invoices go out with a payment link, so customers can pay you in one click. Cash flow forecasts show where you will be next month, not just today.</span></li>
<li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Ruby Harlow</strong><span class="text-truncate small"><span class="fw-semibold">Budgeting basics for small teams</span> – No monthly fees on the basic plan and no hidden charges on transfers. Payroll runs on time, with tax and pension payments handled for you.</span></li>
</ul>4Table cell notes
A long note column truncated with text-truncate and a max width on the cell.
| Order | Note | Total |
|---|---|---|
| #ORD-9724 | Open a business account online in about ten minutes, with no branch visit. | $354.82 |
| #INV-2204 | Your money is protected by bank-grade security and regulated partners. | $134.90 |
| #ORD-8471 | Thousands of members already trust us, and we work hard to keep it that way. | $249.11 |
<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>#ORD-9724</td>
<td class="text-truncate" style="max-width:12rem">Open a business account online in about ten minutes, with no branch visit.</td>
<td class="text-end">$354.82</td>
</tr>
<tr>
<td>#INV-2204</td>
<td class="text-truncate" style="max-width:12rem">Your money is protected by bank-grade security and regulated partners.</td>
<td class="text-end">$134.90</td>
</tr>
<tr>
<td>#ORD-8471</td>
<td class="text-truncate" style="max-width:12rem">Thousands of members already trust us, and we work hard to keep it that way.</td>
<td class="text-end">$249.11</td>
</tr>
</tbody>
</table>
</div>5Long file names
File names shorten while the size stays visible at the end.
- paying-international-suppliers-without-high-fees-final-version-2.docx432 KB
- how-a-coffee-roaster-cut-card-fees-by-a-third-final-version-4.docx673 KB
- a-simple-guide-to-business-spending-policies-final-version-9.docx650 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">paying-international-suppliers-without-high-fees-final-version-2.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">432 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">how-a-coffee-roaster-cut-card-fees-by-a-third-final-version-4.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">673 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">a-simple-guide-to-business-spending-policies-final-version-9.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">650 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="#">Cards</a></li>
<li class="breadcrumb-item active text-truncate" aria-current="page">We keep things simple, so you can focus on what matters to you.</li>
</ol>
</nav>7Notification preview
A toast-like card where the message preview stays on one line.
Ethan Larsen replied: Our team has done this many times, so you never have to guess.12 hours 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">Ethan Larsen replied: Our team has done this many times, so you never have to guess.</strong><small class="text-body-secondary">12 hours ago</small>
</div>
</div>8Equal card titles
Truncated titles keep a grid of cards the same height.
How to close your books faster every month: Friendly people answer your questions quickly, by phone, chat or email.
Feb 8, 2026
The small habits that make a big difference: We listen first, then build a plan around what you actually need.
Jun 27, 2026
Looking back at a busy season: Send and receive money in more than 30 currencies at fair exchange rates.
Feb 1, 2026
<div class="row g-3">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h3 class="h6 text-truncate">How to close your books faster every month: Friendly people answer your questions quickly, by phone, chat or email.</h3>
<p class="small text-body-secondary mb-0">Feb 8, 2026</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h3 class="h6 text-truncate">The small habits that make a big difference: We listen first, then build a plan around what you actually need.</h3>
<p class="small text-body-secondary mb-0">Jun 27, 2026</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h3 class="h6 text-truncate">Looking back at a busy season: Send and receive money in more than 30 currencies at fair exchange rates.</h3>
<p class="small text-body-secondary mb-0">Feb 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.
Maya Morgan16:30
Real people answer your questions around the clock, every day of the year. Clear prices, honest advice and no surprises along the way.
Omar Okafor20:15
Start in minutes and get help from a real person whenever you need it. Every payment appears instantly, with receipts matched automatically.
Mateo Patel20:45
Accounting sync keeps your books up to date without manual exports. Issue virtual and physical cards to your team with limits you control.
<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">Maya Morgan</strong><small class="ms-auto ps-2 text-body-secondary">16:30</small>
</div>
<div class="small text-body-secondary text-truncate">
Real people answer your questions around the clock, every day of the year. Clear prices, honest advice and no surprises along the way.
</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-2.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">Omar Okafor</strong><small class="ms-auto ps-2 text-body-secondary">20:15</small>
</div>
<div class="small text-body-secondary text-truncate">
Start in minutes and get help from a real person whenever you need it. Every payment appears instantly, with receipts matched automatically.
</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-2.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">Mateo Patel</strong><small class="ms-auto ps-2 text-body-secondary">20:45</small>
</div>
<div class="small text-body-secondary text-truncate">
Accounting sync keeps your books up to date without manual exports. Issue virtual and physical cards to your team with limits you control.
</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/journey/tips/getting-started-with-the-new-dashboard">example.com/story/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.
Metal card Cards edition
$10.00
Basic account Payments edition
Free
Invoice pack Invoices edition
$8.00
Pro account Payments edition
$11.00<div class="row g-2">
<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">
Metal card Cards edition
</div>
<strong class="small">$10.00</strong>
</div>
</div>
<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">
Basic account Payments edition
</div>
<strong class="small">Free</strong>
</div>
</div>
<div class="col-6 col-md-3">
<div class="border rounded p-2">
<img src="../assets/img/product-8.svg" alt="" class="img-fluid rounded mb-1">
<div class="small text-truncate">
Invoice pack Invoices edition
</div>
<strong class="small">$8.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">
Pro account Payments edition
</div>
<strong class="small">$11.00</strong>
</div>
</div>
</div>12Truncated chips
Badges with a max width so long labels never break the row.
Five things we learned this yearHow a coffee roaster cut card fees by a thirdA simple guide to business spending policiesWhat our members asked us most
<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">Five things we learned this year</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">How a coffee roaster cut card fees by a third</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">A simple guide to business spending policies</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">What our members asked us most</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">Tideen Hub</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-4.svg" alt="" width="24" height="24" class="rounded-circle"><span class="text-truncate">Ella Duarte (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
Every detail is handled by people who care about getting it right. Payroll runs on time, with tax and pension payments handled for you.
With min-width: 0
Clear prices, honest advice and no surprises along the way. Invoices go out with a payment link, so customers can pay you in one click.
<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">
Every detail is handled by people who care about getting it right. Payroll runs on time, with tax and pension payments handled for you.
</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">
Clear prices, honest advice and no surprises along the way. Invoices go out with a payment link, so customers can pay you in one click.
</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">Multi-currency wallets Friendly team calm</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">Corporate cards Simple dashboard practical</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">Invoicing Reliable release honest</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">Expense tracking Powerful plan friendly</span></a></li>
</ul>
</nav>16Kanban card titles
Narrow board columns keep task titles tidy with truncation.
To do
Getting paid on time: invoice tips that work
Paying international suppliers without high fees
Doing
Running payroll for your first five hires
Budgeting basics for small teams
Done
What to look for in a business account
Our favourite tips for busy weeks
<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">
Getting paid on time: invoice tips that work
</div>
<div class="bg-body border rounded p-2 mt-2 small text-truncate">
Paying international suppliers without high fees
</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">
Running payroll for your first five hires
</div>
<div class="bg-body border rounded p-2 mt-2 small text-truncate">
Budgeting basics for small teams
</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 to look for in a business account
</div>
<div class="bg-body border rounded p-2 mt-2 small text-truncate">
Our favourite tips for busy weeks
</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">Finn Alvarez, 448 Willow Way, Austin 61081, United States</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">Invoicing for members</span> </button>
<ul class="dropdown-menu" aria-labelledby="hp-dd-1242">
<li><a class="dropdown-item" href="#">Business accounts</a></li>
<li><a class="dropdown-item" href="#">Corporate cards</a></li>
</ul>
</div>19Playlist
Long episode or track titles truncate while the duration stays aligned.
- Clear numbers for confident decisions3:08
- Money management made simple5:23
- Business banking without the paperwork4:37
<ol class="list-group list-group-numbered">
<li class="list-group-item d-flex gap-2"><span class="text-truncate">Clear numbers for confident decisions</span><small class="ms-auto text-body-secondary">3:08</small></li>
<li class="list-group-item d-flex gap-2"><span class="text-truncate">Money management made simple</span><small class="ms-auto text-body-secondary">5:23</small></li>
<li class="list-group-item d-flex gap-2"><span class="text-truncate">Business banking without the paperwork</span><small class="ms-auto text-body-secondary">4:37</small></li>
</ol>20Full text in a tooltip
Offer the complete text in a tooltip so nothing is lost when it is truncated.
We listen first, then build a plan around what you actually need. Your money is protected by bank-grade security and regulated partners.
<span class="d-inline-block text-truncate hp-tt" style="max-width:16rem" tabindex="0" data-ui-toggle="tooltip" data-ui-title="We listen first, then build a plan around what you actually need. Your money is protected by bank-grade security and regulated partners.">We listen first, then build a plan around what you actually need. Your money is protected by bank-grade security and regulated partners.</span>