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.
A clear update turns results you can measure without extra tools. A flexible update guides new ideas to life all year round.
<p class="truncate hp-tt mb-0" style="max-width:18rem">A clear update turns results you can measure without extra tools. A flexible update guides new ideas to life 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 Sato and Lucas Ibrahim yesterday.
<p class="mb-0">Last edited by <span class="inline-block truncate align-bottom hp-tt" style="max-width:8rem">Theo Sato and Lucas Ibrahim</span> yesterday.</p>3Inbox preview
Subject and preview text cut to one line in an email list.
- Mason IbrahimInside the flexible process – The new senior designers only turns new ideas to life with friendly support. The new award-winning team shows every detail in view without the usual hassle.
- Ella Tanaka3 lessons from our project – A fast dashboard makes you focused on what matters with friendly support. A fast release brings every detail in view from the very first day.
- Amara AlvarezInside the bright experience – Our web design connects data easy to understand in just a few clicks. The new weekly demos shows decisions quicker and clearer wherever you are.
<ul class="list-group">
<li class="list-group-item flex gap-4"><strong class="shrink-0 small" style="width:7rem">Mason Ibrahim</strong><span class="truncate small"><span class="font-semibold">Inside the flexible process</span> – The new senior designers only turns new ideas to life with friendly support. The new award-winning team shows every detail in view without the usual hassle.</span></li>
<li class="list-group-item flex gap-4"><strong class="shrink-0 small" style="width:7rem">Ella Tanaka</strong><span class="truncate small"><span class="font-semibold">3 lessons from our project</span> – A fast dashboard makes you focused on what matters with friendly support. A fast release brings every detail in view from the very first day.</span></li>
<li class="list-group-item flex gap-4"><strong class="shrink-0 small" style="width:7rem">Amara Alvarez</strong><span class="truncate small"><span class="font-semibold">Inside the bright experience</span> – Our web design connects data easy to understand in just a few clicks. The new weekly demos shows decisions quicker and clearer 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-8046 | This simple process gives complex tasks into simple steps wherever you are. | $377.41 |
| #ORD-2046 | A reliable idea connects projects moving forward at a fair price. | $400.39 |
| #PO-2544 | This simple process turns results you can measure from the very first day. | $234.41 |
<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-8046</td>
<td class="truncate" style="max-width:12rem">This simple process gives complex tasks into simple steps wherever you are.</td>
<td class="text-end">$377.41</td>
</tr>
<tr>
<td>#ORD-2046</td>
<td class="truncate" style="max-width:12rem">A reliable idea connects projects moving forward at a fair price.</td>
<td class="text-end">$400.39</td>
</tr>
<tr>
<td>#PO-2544</td>
<td class="truncate" style="max-width:12rem">This simple process turns results you can measure from the very first day.</td>
<td class="text-end">$234.41</td>
</tr>
</tbody>
</table>
</div>5Long file names
File names shorten while the size stays visible at the end.
- how-we-rebuilt-our-process-final-version-6.docx83 KB
- project-notes-for-clients-final-version-6.docx692 KB
- 9-lessons-from-our-journey-final-version-7.docx288 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-fill" aria-hidden="true"></i></span><span class="truncate">how-we-rebuilt-our-process-final-version-6.docx</span><small class="ms-auto text-muted shrink-0">83 KB</small></li>
<li class="flex items-center gap-2"><span class="text-primary"><i class="bi bi-file-earmark-text-fill" aria-hidden="true"></i></span><span class="truncate">project-notes-for-clients-final-version-6.docx</span><small class="ms-auto text-muted shrink-0">692 KB</small></li>
<li class="flex items-center gap-2"><span class="text-primary"><i class="bi bi-file-earmark-text-fill" aria-hidden="true"></i></span><span class="truncate">9-lessons-from-our-journey-final-version-7.docx</span><small class="ms-auto text-muted shrink-0">288 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="#">Print</a></li>
<li class="breadcrumb-item active truncate" aria-current="page">The new weekly demos makes time back in your day for teams of every size.</li>
</ol>
</nav>7Notification preview
A toast-like card where the message preview stays on one line.
Kai Ibrahim replied: The new weekly demos helps decisions quicker and clearer at a fair price.yesterday
<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">Kai Ibrahim replied: The new weekly demos helps decisions quicker and clearer at a fair price.</strong><small class="text-muted">yesterday</small>
</div>
</div>8Equal card titles
Truncated titles keep a grid of cards the same height.
How we rebuilt our project: This calm team turns decisions quicker and clearer with friendly support.
Mar 30, 2026
How we rebuilt our workflow: A focused journey keeps the whole team on the same page for teams of every size.
Jan 9, 2026
Modern ways to improve your release: The new weekly demos guides decisions quicker and clearer without extra tools.
Oct 3, 2025
<div class="row g-3">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h3 class="h6 truncate">How we rebuilt our project: This calm team turns decisions quicker and clearer with friendly support.</h3>
<p class="small text-muted mb-0">Mar 30, 2026</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h3 class="h6 truncate">How we rebuilt our workflow: A focused journey keeps the whole team on the same page for teams of every size.</h3>
<p class="small text-muted mb-0">Jan 9, 2026</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h3 class="h6 truncate">Modern ways to improve your release: The new weekly demos guides decisions quicker and clearer without extra tools.</h3>
<p class="small text-muted mb-0">Oct 3, 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.
Aria Silva16:45
The new weekly demos turns every detail in view from the very first day. The new senior designers only guides customers coming back with friendly support.
Priya Haddad15:15
This honest launch helps time back in your day for teams of every size. A secure idea helps every detail in view in just a few clicks.
Maya Patel12:30
This secure team brings projects moving forward at a fair price. The new award-winning team makes projects moving forward wherever you are.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action flex gap-2 items-center"><img src="../assets/img/avatar-12.svg" alt="" width="40" height="40" class="rounded-full">
<div style="min-width:0" class="grow">
<div class="flex">
<strong class="small truncate">Aria Silva</strong><small class="ms-auto ps-2 text-muted">16:45</small>
</div>
<div class="small text-muted truncate">
The new weekly demos turns every detail in view from the very first day. The new senior designers only guides customers coming back with friendly support.
</div>
</div>
</a><a href="#" class="list-group-item list-group-item-action flex gap-2 items-center"><img src="../assets/img/avatar-2.svg" alt="" width="40" height="40" class="rounded-full">
<div style="min-width:0" class="grow">
<div class="flex">
<strong class="small truncate">Priya Haddad</strong><small class="ms-auto ps-2 text-muted">15:15</small>
</div>
<div class="small text-muted truncate">
This honest launch helps time back in your day for teams of every size. A secure idea helps every detail in view in just a few clicks.
</div>
</div>
</a><a href="#" class="list-group-item list-group-item-action flex gap-2 items-center"><img src="../assets/img/avatar-12.svg" alt="" width="40" height="40" class="rounded-full">
<div style="min-width:0" class="grow">
<div class="flex">
<strong class="small truncate">Maya Patel</strong><small class="ms-auto ps-2 text-muted">12:30</small>
</div>
<div class="small text-muted truncate">
This secure team brings projects moving forward at a fair price. The new award-winning team makes projects moving forward wherever you are.
</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/community/case study/getting-started-with-the-new-dashboard">example.com/routine/tips/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.
Social kit Web edition
$29.00
Website package Social edition
$188.99
Launch campaign Social edition
$192.00
Video edit Motion edition
$49.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-1.svg" alt="" class="img-fluid rounded-md mb-1">
<div class="small truncate">
Social kit Web edition
</div>
<strong class="small">$29.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">
Website package Social edition
</div>
<strong class="small">$188.99</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">
Launch campaign Social edition
</div>
<strong class="small">$192.00</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">
Video edit Motion edition
</div>
<strong class="small">$49.00</strong>
</div>
</div>
</div>12Truncated chips
Badges with a max width so long labels never break the row.
How we rebuilt our launch6 lessons from our story6 lessons from our routineHow we rebuilt our journey
<div class="flex flex-wrap gap-2">
<span class="badge rounded-full text-bg-light border inline-block truncate" style="max-width:9rem">How we rebuilt our launch</span><span class="badge rounded-full text-bg-light border inline-block truncate" style="max-width:9rem">6 lessons from our story</span><span class="badge rounded-full text-bg-light border inline-block truncate" style="max-width:9rem">6 lessons from our routine</span><span class="badge rounded-full text-bg-light border inline-block truncate" style="max-width:9rem">How we rebuilt our journey</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 4</span>
<button type="button" class="btn btn-light btn-sm flex items-center gap-2" style="max-width:12rem"> <img src="../assets/img/avatar-12.svg" alt="" width="24" height="24" class="rounded-full"><span class="truncate">Felix Brennan (Marketing 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
The new fast turnaround helps complex tasks into simple steps all year round. The new weekly demos helps time back in your day wherever you are.
With min-width: 0
Our web design makes new ideas to life in just a few clicks. This friendly release connects decisions quicker and clearer without extra tools.
<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">
The new fast turnaround helps complex tasks into simple steps all year round. The new weekly demos helps time back in your day wherever you are.
</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">
Our web design makes new ideas to life in just a few clicks. This friendly release connects decisions quicker and clearer without extra tools.
</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">Motion graphics Bright process reliable</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">Content strategy Fast release honest</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">Content strategy Fast team 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">Content strategy Powerful dashboard smart</span></a></li>
</ul>
</nav>16Kanban card titles
Narrow board columns keep task titles tidy with truncation.
To do
What's new in print
Dashboard notes for clients
Doing
Inside the elegant workflow
Inside the flexible journey
Done
Inside the practical goal
The practical idea checklist
<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">
What's new in print
</div>
<div class="bg-page border rounded-md p-2 mt-2 small truncate">
Dashboard notes for clients
</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">
Inside the elegant workflow
</div>
<div class="bg-page border rounded-md p-2 mt-2 small truncate">
Inside the flexible journey
</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">
Inside the practical goal
</div>
<div class="bg-page border rounded-md p-2 mt-2 small truncate">
The practical idea checklist
</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">Felix Whitaker, 178 Riverside Drive, Cape Town 75958, South Korea</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">Campaign production for clients</span> </button>
<ul class="dropdown-menu" aria-labelledby="hp-dd-1242">
<li><a class="dropdown-item" href="#">Web design</a></li>
<li><a class="dropdown-item" href="#">Web design</a></li>
</ul>
</div>19Playlist
Long episode or track titles truncate while the duration stays aligned.
- Digital products with personality2:24
- Strategy, design and code under one roof2:10
- Make your next launch unforgettable3:01
<ol class="list-group list-group-numbered">
<li class="list-group-item flex gap-2"><span class="truncate">Digital products with personality</span><small class="ms-auto text-muted">2:24</small></li>
<li class="list-group-item flex gap-2"><span class="truncate">Strategy, design and code under one roof</span><small class="ms-auto text-muted">2:10</small></li>
<li class="list-group-item flex gap-2"><span class="truncate">Make your next launch unforgettable</span><small class="ms-auto text-muted">3:01</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 senior designers only brings complex tasks into simple steps without the usual hassle. The new senior designers only guides time back in your day on any device.
<span class="inline-block truncate hp-tt" style="max-width:16rem" tabindex="0" data-ui-toggle="tooltip" data-ui-title="The new senior designers only brings complex tasks into simple steps without the usual hassle. The new senior designers only guides time back in your day on any device.">The new senior designers only brings complex tasks into simple steps without the usual hassle. The new senior designers only guides time back in your day on any device.</span>