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.
Your data is encrypted, backed up daily and hosted in the region you choose. Real-time dashboards show what is on track and what needs attention.
<p class="truncate hp-tt mb-0" style="max-width:18rem">Your data is encrypted, backed up daily and hosted in the region you choose. Real-time dashboards show what is on track and what needs attention.</p>2Inline-block inside a sentence
Inline elements need d-inline-block plus a max width to truncate.
Last edited by Mason Carter and Aria Mensah 13 hours ago.
<p class="mb-0">Last edited by <span class="inline-block truncate align-bottom hp-tt" style="max-width:8rem">Mason Carter and Aria Mensah</span> 13 hours ago.</p>3Inbox preview
Subject and preview text cut to one line in an email list.
- Kai FischerHow remote teams keep projects on track – Every update lands in one place, so nothing gets lost in email threads. Start free, upgrade when you grow and cancel any time with one click.
- Omar DelgadoSeven automations every team should set up – Thousands of customers already trust us, and we work hard to keep it that way. Automations take care of the repetitive steps, so people can focus on real work.
- Nora NguyenWriting status updates people actually read – Every detail is handled by people who care about getting it right. We measure success by how many customers come back and tell their friends.
<ul class="list-group">
<li class="list-group-item flex gap-4"><strong class="shrink-0 small" style="width:7rem">Kai Fischer</strong><span class="truncate small"><span class="font-semibold">How remote teams keep projects on track</span> – Every update lands in one place, so nothing gets lost in email threads. Start free, upgrade when you grow and cancel any time with one click.</span></li>
<li class="list-group-item flex gap-4"><strong class="shrink-0 small" style="width:7rem">Omar Delgado</strong><span class="truncate small"><span class="font-semibold">Seven automations every team should set up</span> – Thousands of customers already trust us, and we work hard to keep it that way. Automations take care of the repetitive steps, so people can focus on real work.</span></li>
<li class="list-group-item flex gap-4"><strong class="shrink-0 small" style="width:7rem">Nora Nguyen</strong><span class="truncate small"><span class="font-semibold">Writing status updates people actually read</span> – Every detail is handled by people who care about getting it right. We measure success by how many customers come back and tell their friends.</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-4960 | Start in minutes and get help from a real person whenever you need it. | $302.23 |
| #ORD-9148 | Teams report saving around five hours a week after the first month. | $353.35 |
| #INV-4872 | Plan projects, track progress and share updates without another status meeting. | $43.51 |
<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-4960</td>
<td class="truncate" style="max-width:12rem">Start in minutes and get help from a real person whenever you need it.</td>
<td class="text-end">$302.23</td>
</tr>
<tr>
<td>#ORD-9148</td>
<td class="truncate" style="max-width:12rem">Teams report saving around five hours a week after the first month.</td>
<td class="text-end">$353.35</td>
</tr>
<tr>
<td>#INV-4872</td>
<td class="truncate" style="max-width:12rem">Plan projects, track progress and share updates without another status meeting.</td>
<td class="text-end">$43.51</td>
</tr>
</tbody>
</table>
</div>5Long file names
File names shorten while the size stays visible at the end.
- the-small-habits-that-make-a-big-difference-final-version-6.docx456 KB
- inside-our-product-roadmap-for-next-year-final-version-6.docx706 KB
- planning-a-product-launch-in-six-weeks-final-version-2.docx675 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-ink"><i class="bi bi-file-earmark-text-fill" aria-hidden="true"></i></span><span class="truncate">the-small-habits-that-make-a-big-difference-final-version-6.docx</span><small class="ms-auto text-muted shrink-0">456 KB</small></li>
<li class="flex items-center gap-2"><span class="text-primary-ink"><i class="bi bi-file-earmark-text-fill" aria-hidden="true"></i></span><span class="truncate">inside-our-product-roadmap-for-next-year-final-version-6.docx</span><small class="ms-auto text-muted shrink-0">706 KB</small></li>
<li class="flex items-center gap-2"><span class="text-primary-ink"><i class="bi bi-file-earmark-text-fill" aria-hidden="true"></i></span><span class="truncate">planning-a-product-launch-in-six-weeks-final-version-2.docx</span><small class="ms-auto text-muted shrink-0">675 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="#">Engineering</a></li>
<li class="breadcrumb-item active truncate" aria-current="page">We listen first, then build a plan around what you actually need.</li>
</ol>
</nav>7Notification preview
A toast-like card where the message preview stays on one line.
Ethan Patel replied: Granular roles keep sensitive work private while everyone else stays informed.6 hours ago
<div class="flex items-center gap-4 border rounded-md p-2" style="max-width:24rem">
<span class="text-xl text-primary-ink"><i class="bi bi-bell-fill" aria-hidden="true"></i></span>
<div class="truncate">
<strong class="small block truncate">Ethan Patel replied: Granular roles keep sensitive work private while everyone else stays informed.</strong><small class="text-muted">6 hours ago</small>
</div>
</div>8Equal card titles
Truncated titles keep a grid of cards the same height.
Our favourite tips for busy weeks: Every update lands in one place, so nothing gets lost in email threads.
Sep 19, 2026
How to choose the right plan: Your data is encrypted, backed up daily and hosted in the region you choose.
Sep 22, 2026
The real cost of switching between tools: We keep things simple, so you can focus on what matters to you.
Nov 6, 2025
<div class="row g-3">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h3 class="h6 truncate">Our favourite tips for busy weeks: Every update lands in one place, so nothing gets lost in email threads.</h3>
<p class="small text-muted mb-0">Sep 19, 2026</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h3 class="h6 truncate">How to choose the right plan: Your data is encrypted, backed up daily and hosted in the region you choose.</h3>
<p class="small text-muted mb-0">Sep 22, 2026</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h3 class="h6 truncate">The real cost of switching between tools: We keep things simple, so you can focus on what matters to you.</h3>
<p class="small text-muted mb-0">Nov 6, 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.
Ella Whitaker11:00
Set up in an afternoon, connect the tools you use and invite your team. Start in minutes and get help from a real person whenever you need it.
Tariq Hughes08:15
We measure success by how many customers come back and tell their friends. Automations take care of the repetitive steps, so people can focus on real work.
Ava Rossi20:15
Start free, upgrade when you grow and cancel any time with one click. Clear prices, honest advice and no surprises along the way.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action flex gap-2 items-center"><img src="../assets/img/avatar-9.svg" alt="" width="40" height="40" class="rounded-full">
<div style="min-width:0" class="grow">
<div class="flex">
<strong class="small truncate">Ella Whitaker</strong><small class="ms-auto ps-2 text-muted">11:00</small>
</div>
<div class="small text-muted truncate">
Set up in an afternoon, connect the tools you use and invite your team. Start in minutes and get help from a real person whenever you need it.
</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 Hughes</strong><small class="ms-auto ps-2 text-muted">08:15</small>
</div>
<div class="small text-muted truncate">
We measure success by how many customers come back and tell their friends. Automations take care of the repetitive steps, so people can focus on real work.
</div>
</div>
</a><a href="#" class="list-group-item list-group-item-action flex gap-2 items-center"><img src="../assets/img/avatar-5.svg" alt="" width="40" height="40" class="rounded-full">
<div style="min-width:0" class="grow">
<div class="flex">
<strong class="small truncate">Ava Rossi</strong><small class="ms-auto ps-2 text-muted">20:15</small>
</div>
<div class="small text-muted truncate">
Start free, upgrade when you grow and cancel any time with one click. Clear prices, honest advice and no surprises along the way.
</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/release/release/getting-started-with-the-new-dashboard">example.com/goal/design/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.
API boost Engineering edition
$36.00
Analytics add-on Engineering edition
$11.00
Team plan Product edition
$21.00
Storage pack Product edition
$9.00<div class="row g-2">
<div class="col-6 col-md-3">
<div class="border rounded-md p-2">
<img src="../assets/img/product-11.svg" alt="" class="img-fluid rounded-md mb-1">
<div class="small truncate">
API boost Engineering edition
</div>
<strong class="small">$36.00</strong>
</div>
</div>
<div class="col-6 col-md-3">
<div class="border rounded-md p-2">
<img src="../assets/img/product-5.svg" alt="" class="img-fluid rounded-md mb-1">
<div class="small truncate">
Analytics add-on Engineering edition
</div>
<strong class="small">$11.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">
Team plan Product edition
</div>
<strong class="small">$21.00</strong>
</div>
</div>
<div class="col-6 col-md-3">
<div class="border rounded-md p-2">
<img src="../assets/img/product-12.svg" alt="" class="img-fluid rounded-md mb-1">
<div class="small truncate">
Storage pack Product edition
</div>
<strong class="small">$9.00</strong>
</div>
</div>
</div>12Truncated chips
Badges with a max width so long labels never break the row.
Looking back at a busy seasonWhat our customers asked us mostHow remote teams keep projects on trackA practical guide to async work
<div class="flex flex-wrap gap-2">
<span class="badge rounded-full text-bg-light border inline-block truncate" style="max-width:9rem">Looking back at a busy season</span><span class="badge rounded-full text-bg-light border inline-block truncate" style="max-width:9rem">What our customers asked us most</span><span class="badge rounded-full text-bg-light border inline-block truncate" style="max-width:9rem">How remote teams keep projects on track</span><span class="badge rounded-full text-bg-light border inline-block truncate" style="max-width:9rem">A practical guide to async work</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">Aeroora Flow</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">Leo Silva (Customer Success)</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
Our team has done this many times, so you never have to guess. Our open API and ready-made integrations fit into the stack you already have.
With min-width: 0
Onboarding guides and live chat help new colleagues get going on day one. Clear reports turn weekly numbers into decisions in minutes, not days.
<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">
Our team has done this many times, so you never have to guess. Our open API and ready-made integrations fit into the stack you already have.
</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">
Onboarding guides and live chat help new colleagues get going on day one. Clear reports turn weekly numbers into decisions in minutes, not days.
</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">Smart reporting Fast release fast</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">Smart reporting Bright release friendly</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">Smart reporting Practical dashboard calm</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">Smart reporting Elegant update honest</span></a></li>
</ul>
</nav>16Kanban card titles
Narrow board columns keep task titles tidy with truncation.
To do
Writing status updates people actually read
Planning a product launch in six weeks
Doing
How one support team cut first replies to 20 minutes
The small habits that make a big difference
Done
Five things we learned this year
A beginner's guide to getting started
<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">
Writing status updates people actually read
</div>
<div class="bg-page border rounded-md p-2 mt-2 small truncate">
Planning a product launch in six weeks
</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">
How one support team cut first replies to 20 minutes
</div>
<div class="bg-page border rounded-md p-2 mt-2 small truncate">
The small habits that make a big difference
</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">
Five things we learned this year
</div>
<div class="bg-page border rounded-md p-2 mt-2 small truncate">
A beginner's guide to getting started
</div>
</div>
</div>
</div>17Order summary address
A long shipping address truncated in a summary line, with an edit link.
<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">Zoe Tanaka, 197 Riverside Drive, Barcelona 31525, Spain</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">API integrations for customers</span> </button>
<ul class="dropdown-menu" aria-labelledby="hp-dd-1242">
<li><a class="dropdown-item" href="#">Team analytics</a></li>
<li><a class="dropdown-item" href="#">Secure file sharing</a></li>
</ul>
</div>19Playlist
Long episode or track titles truncate while the duration stays aligned.
- Your whole team, finally in sync5:05
- From idea to release, without the chaos4:20
- Ship faster with less busywork3:38
<ol class="list-group list-group-numbered">
<li class="list-group-item flex gap-2"><span class="truncate">Your whole team, finally in sync</span><small class="ms-auto text-muted">5:05</small></li>
<li class="list-group-item flex gap-2"><span class="truncate">From idea to release, without the chaos</span><small class="ms-auto text-muted">4:20</small></li>
<li class="list-group-item flex gap-2"><span class="truncate">Ship faster with less busywork</span><small class="ms-auto text-muted">3:38</small></li>
</ol>20Full text in a tooltip
Offer the complete text in a tooltip so nothing is lost when it is truncated.
Thousands of customers already trust us, and we work hard to keep it that way. Real-time dashboards show what is on track and what needs attention.
<span class="inline-block truncate hp-tt" style="max-width:16rem" tabindex="0" data-ui-toggle="tooltip" data-ui-title="Thousands of customers already trust us, and we work hard to keep it that way. Real-time dashboards show what is on track and what needs attention.">Thousands of customers already trust us, and we work hard to keep it that way. Real-time dashboards show what is on track and what needs attention.</span>