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.
Local guides show you the places that never make it into guidebooks. Our travel experts are on call around the clock while you are away.
<p class="truncate hp-tt mb-0" style="max-width:18rem">Local guides show you the places that never make it into guidebooks. Our travel experts are on call around the clock while you are away.</p>2Inline-block inside a sentence
Inline elements need d-inline-block plus a max width to truncate.
Last edited by Jonah Hughes and Leo Fischer 15 min ago.
<p class="mb-0">Last edited by <span class="inline-block truncate align-bottom hp-tt" style="max-width:8rem">Jonah Hughes and Leo Fischer</span> 15 min ago.</p>3Inbox preview
Subject and preview text cut to one line in an email list.
- Finn TanakaThree days in Lisbon, hour by hour – Friendly people answer your questions quickly, by phone, chat or email. Members get room upgrades and late check-out at selected hotels.
- Kai DuarteOur favourite tips for busy weeks – Every hotel on our list is visited and reviewed by our own travel team. Travel insurance and car rental can be added in a single click.
- Sofia WhitakerHow to travel more responsibly – Clear prices, honest advice and no surprises along the way. Family rooms, adults-only retreats and pet-friendly stays in one search.
<ul class="list-group">
<li class="list-group-item flex gap-4"><strong class="shrink-0 small" style="width:7rem">Finn Tanaka</strong><span class="truncate small"><span class="font-semibold">Three days in Lisbon, hour by hour</span> – Friendly people answer your questions quickly, by phone, chat or email. Members get room upgrades and late check-out at selected hotels.</span></li>
<li class="list-group-item flex gap-4"><strong class="shrink-0 small" style="width:7rem">Kai Duarte</strong><span class="truncate small"><span class="font-semibold">Our favourite tips for busy weeks</span> – Every hotel on our list is visited and reviewed by our own travel team. Travel insurance and car rental can be added in a single click.</span></li>
<li class="list-group-item flex gap-4"><strong class="shrink-0 small" style="width:7rem">Sofia Whitaker</strong><span class="truncate small"><span class="font-semibold">How to travel more responsibly</span> – Clear prices, honest advice and no surprises along the way. Family rooms, adults-only retreats and pet-friendly stays in one search.</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-2712 | Our team has done this many times, so you never have to guess. | $295.33 |
| #INV-8829 | Every detail is handled by people who care about getting it right. | $110.73 |
| #TX-7924 | Free cancellation on most stays means you can book now and decide later. | $324.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-2712</td>
<td class="truncate" style="max-width:12rem">Our team has done this many times, so you never have to guess.</td>
<td class="text-end">$295.33</td>
</tr>
<tr>
<td>#INV-8829</td>
<td class="truncate" style="max-width:12rem">Every detail is handled by people who care about getting it right.</td>
<td class="text-end">$110.73</td>
</tr>
<tr>
<td>#TX-7924</td>
<td class="truncate" style="max-width:12rem">Free cancellation on most stays means you can book now and decide later.</td>
<td class="text-end">$324.51</td>
</tr>
</tbody>
</table>
</div>5Long file names
File names shorten while the size stays visible at the end.
- five-things-we-learned-this-year-final-version-6.docx836 KB
- ten-weekend-escapes-within-two-hours-of-home-final-version-2.docx408 KB
- how-to-choose-the-right-trip-final-version-6.docx126 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">five-things-we-learned-this-year-final-version-6.docx</span><small class="ms-auto text-muted shrink-0">836 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">ten-weekend-escapes-within-two-hours-of-home-final-version-2.docx</span><small class="ms-auto text-muted shrink-0">408 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">how-to-choose-the-right-trip-final-version-6.docx</span><small class="ms-auto text-muted shrink-0">126 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="#">Adventure</a></li>
<li class="breadcrumb-item active truncate" aria-current="page">Every hotel on our list is visited and reviewed by our own travel team.</li>
</ol>
</nav>7Notification preview
A toast-like card where the message preview stays on one line.
Samir Okafor replied: Flexible dates help you find quieter weeks and better prices.8 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">Samir Okafor replied: Flexible dates help you find quieter weeks and better prices.</strong><small class="text-muted">8 hours ago</small>
</div>
</div>8Equal card titles
Truncated titles keep a grid of cards the same height.
Ten weekend escapes within two hours of home: Start in minutes and get help from a real person whenever you need it.
Mar 31, 2026
Five things we learned this year: We find the best price, and if you see it cheaper we match it.
Feb 4, 2026
How to travel more responsibly: We keep things simple, so you can focus on what matters to you.
Jul 6, 2026
<div class="row g-3">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h3 class="h6 truncate">Ten weekend escapes within two hours of home: Start in minutes and get help from a real person whenever you need it.</h3>
<p class="small text-muted mb-0">Mar 31, 2026</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h3 class="h6 truncate">Five things we learned this year: We find the best price, and if you see it cheaper we match it.</h3>
<p class="small text-muted mb-0">Feb 4, 2026</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h3 class="h6 truncate">How to travel more responsibly: We keep things simple, so you can focus on what matters to you.</h3>
<p class="small text-muted mb-0">Jul 6, 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.
Lea Sato17:00
Local guides show you the places that never make it into guidebooks. Travel insurance and car rental can be added in a single click.
Felix Ashford12:30
Friendly people answer your questions quickly, by phone, chat or email. Our travel experts are on call around the clock while you are away.
Liam Larsen19:15
We listen first, then build a plan around what you actually need. We measure success by how many travellers come back and tell their friends.
<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">Lea Sato</strong><small class="ms-auto ps-2 text-muted">17:00</small>
</div>
<div class="small text-muted truncate">
Local guides show you the places that never make it into guidebooks. Travel insurance and car rental can be added in a single click.
</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">Felix Ashford</strong><small class="ms-auto ps-2 text-muted">12:30</small>
</div>
<div class="small text-muted truncate">
Friendly people answer your questions quickly, by phone, chat or email. Our travel experts are on call around the clock while you are away.
</div>
</div>
</a><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">Liam Larsen</strong><small class="ms-auto ps-2 text-muted">19:15</small>
</div>
<div class="small text-muted truncate">
We listen first, then build a plan around what you actually need. We measure success by how many travellers come back and tell their friends.
</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/process/guide/getting-started-with-the-new-dashboard">example.com/idea/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.
Ski chalet Mountain edition
$321.00
Safari adventure Adventure edition
$2,000
Surf camp Beach edition
$484.00
Food tour Culture edition
$80.99<div class="row g-2">
<div class="col-6 col-md-3">
<div class="border rounded-md p-2">
<img src="../assets/img/product-10.svg" alt="" class="img-fluid rounded-md mb-1">
<div class="small truncate">
Ski chalet Mountain edition
</div>
<strong class="small">$321.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">
Safari adventure Adventure edition
</div>
<strong class="small">$2,000</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">
Surf camp Beach edition
</div>
<strong class="small">$484.00</strong>
</div>
</div>
<div class="col-6 col-md-3">
<div class="border rounded-md p-2">
<img src="../assets/img/product-7.svg" alt="" class="img-fluid rounded-md mb-1">
<div class="small truncate">
Food tour Culture edition
</div>
<strong class="small">$80.99</strong>
</div>
</div>
</div>12Truncated chips
Badges with a max width so long labels never break the row.
Hidden beaches of the MediterraneanWhat our travellers asked us mostThe small habits that make a big differenceA first-timer's guide to safari
<div class="flex flex-wrap gap-2">
<span class="badge rounded-full text-bg-light border inline-block truncate" style="max-width:9rem">Hidden beaches of the Mediterranean</span><span class="badge rounded-full text-bg-light border inline-block truncate" style="max-width:9rem">What our travellers asked us most</span><span class="badge rounded-full text-bg-light border inline-block truncate" style="max-width:9rem">The small habits that make a big difference</span><span class="badge rounded-full text-bg-light border inline-block truncate" style="max-width:9rem">A first-timer's guide to safari</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">Orbiora</span>
<button type="button" class="btn btn-light btn-sm flex items-center gap-2" style="max-width:12rem"> <img src="../assets/img/avatar-3.svg" alt="" width="24" height="24" class="rounded-full"><span class="truncate">Elena Alvarez (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
Every trip supports local businesses and responsible tourism. From city breaks to safaris, we plan trips around how you like to travel.
With min-width: 0
Members get room upgrades and late check-out at selected hotels. Thousands of travellers already trust us, and we work hard to keep it that way.
<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">
Every trip supports local businesses and responsible tourism. From city breaks to safaris, we plan trips around how you like to travel.
</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">
Members get room upgrades and late check-out at selected hotels. Thousands of travellers already trust us, and we work hard to keep it that way.
</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">Holiday packages Practical plan modern</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">Guided tours Smart project focused</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">Travel insurance Honest experience 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">Airport transfers Secure experience flexible</span></a></li>
</ul>
</nav>16Kanban card titles
Narrow board columns keep task titles tidy with truncation.
To do
A beginner's guide to getting started
Travelling with kids: our tried and tested tips
Doing
Behind the scenes with our hotel inspectors
How to pack for two weeks with one bag
Done
Three days in Lisbon, hour by hour
Our favourite small hotels this year
<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">
A beginner's guide to getting started
</div>
<div class="bg-page border rounded-md p-2 mt-2 small truncate">
Travelling with kids: our tried and tested tips
</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">
Behind the scenes with our hotel inspectors
</div>
<div class="bg-page border rounded-md p-2 mt-2 small truncate">
How to pack for two weeks with one bag
</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">
Three days in Lisbon, hour by hour
</div>
<div class="bg-page border rounded-md p-2 mt-2 small truncate">
Our favourite small hotels this year
</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">Theo Mensah, 142 Station Street, Kyoto 53375, Japan</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">Airport transfers for travellers</span> </button>
<ul class="dropdown-menu" aria-labelledby="hp-dd-1242">
<li><a class="dropdown-item" href="#">Airport transfers</a></li>
<li><a class="dropdown-item" href="#">Travel insurance</a></li>
</ul>
</div>19Playlist
Long episode or track titles truncate while the duration stays aligned.
- Adventures for every kind of traveller4:43
- Trips designed around you5:00
- Pack your bags, we will do the rest3:54
<ol class="list-group list-group-numbered">
<li class="list-group-item flex gap-2"><span class="truncate">Adventures for every kind of traveller</span><small class="ms-auto text-muted">4:43</small></li>
<li class="list-group-item flex gap-2"><span class="truncate">Trips designed around you</span><small class="ms-auto text-muted">5:00</small></li>
<li class="list-group-item flex gap-2"><span class="truncate">Pack your bags, we will do the rest</span><small class="ms-auto text-muted">3:54</small></li>
</ol>20Full text in a tooltip
Offer the complete text in a tooltip so nothing is lost when it is truncated.
Airport transfers, tours and dinners are arranged before you arrive. Free cancellation on most stays means you can book now and decide later.
<span class="inline-block truncate hp-tt" style="max-width:16rem" tabindex="0" data-ui-toggle="tooltip" data-ui-title="Airport transfers, tours and dinners are arranged before you arrive. Free cancellation on most stays means you can book now and decide later.">Airport transfers, tours and dinners are arranged before you arrive. Free cancellation on most stays means you can book now and decide later.</span>