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.
Our team has done this many times, so you never have to guess. We measure success by how many attendees come back and tell their friends.
<p class="text-truncate hp-tt mb-0" style="max-width:18rem">Our team has done this many times, so you never have to guess. We measure success by how many attendees come back and tell their friends.</p>2Inline-block inside a sentence
Inline elements need d-inline-block plus a max width to truncate.
Last edited by Zoe Alvarez and Ravi Fischer 43 min ago.
<p class="mb-0">Last edited by <span class="d-inline-block text-truncate align-bottom hp-tt" style="max-width:8rem">Zoe Alvarez and Ravi Fischer</span> 43 min ago.</p>3Inbox preview
Subject and preview text cut to one line in an email list.
- Noah SilvaHow to get the most out of a conference – We keep things simple, so you can focus on what matters to you. Our evening party is the best place to turn talks into friendships.
- Kai IbrahimTen talks you should not miss this year – Virtual passes let you join the main stage live from anywhere. Thousands of attendees already trust us, and we work hard to keep it that way.
- Leo OrtegaHow to pitch a talk that gets accepted – Start in minutes and get help from a real person whenever you need it. Every session is recorded, so you can catch up on anything you missed.
<ul class="list-group">
<li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Noah Silva</strong><span class="text-truncate small"><span class="fw-semibold">How to get the most out of a conference</span> – We keep things simple, so you can focus on what matters to you. Our evening party is the best place to turn talks into friendships.</span></li>
<li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Kai Ibrahim</strong><span class="text-truncate small"><span class="fw-semibold">Ten talks you should not miss this year</span> – Virtual passes let you join the main stage live from anywhere. Thousands of attendees already trust us, and we work hard to keep it that way.</span></li>
<li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Leo Ortega</strong><span class="text-truncate small"><span class="fw-semibold">How to pitch a talk that gets accepted</span> – Start in minutes and get help from a real person whenever you need it. Every session is recorded, so you can catch up on anything you missed.</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-3404 | Every attendee receives a certificate of participation. | $347.89 |
| #PO-4463 | Group tickets include a private meeting room for your team. | $113.53 |
| #PO-1620 | Every detail is handled by people who care about getting it right. | $144.96 |
<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-3404</td>
<td class="text-truncate" style="max-width:12rem">Every attendee receives a certificate of participation.</td>
<td class="text-end">$347.89</td>
</tr>
<tr>
<td>#PO-4463</td>
<td class="text-truncate" style="max-width:12rem">Group tickets include a private meeting room for your team.</td>
<td class="text-end">$113.53</td>
</tr>
<tr>
<td>#PO-1620</td>
<td class="text-truncate" style="max-width:12rem">Every detail is handled by people who care about getting it right.</td>
<td class="text-end">$144.96</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-4.docx782 KB
- what-we-learned-from-last-year's-feedback-final-version-9.docx823 KB
- looking-back-at-a-busy-season-final-version-9.docx480 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">five-things-we-learned-this-year-final-version-4.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">782 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">what-we-learned-from-last-year's-feedback-final-version-9.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">823 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">looking-back-at-a-busy-season-final-version-9.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">480 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="#">Panel</a></li>
<li class="breadcrumb-item active text-truncate" aria-current="page">Early bird tickets save you up to forty percent until the end of the month.</li>
</ol>
</nav>7Notification preview
A toast-like card where the message preview stays on one line.
Sofia Whitaker replied: More than eighty speakers share what they have learned the hard way.2 days 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">Sofia Whitaker replied: More than eighty speakers share what they have learned the hard way.</strong><small class="text-body-secondary">2 days ago</small>
</div>
</div>8Equal card titles
Truncated titles keep a grid of cards the same height.
What makes a panel worth watching: The venue is a short walk from the station and fully accessible.
Mar 21, 2026
Highlights from last year's workshops: Clear prices, honest advice and no surprises along the way.
Jan 28, 2026
Joining online: how the virtual pass works: Three days of keynotes, hands-on workshops and evening meetups.
Dec 13, 2025
<div class="row g-3">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h3 class="h6 text-truncate">What makes a panel worth watching: The venue is a short walk from the station and fully accessible.</h3>
<p class="small text-body-secondary mb-0">Mar 21, 2026</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h3 class="h6 text-truncate">Highlights from last year's workshops: Clear prices, honest advice and no surprises along the way.</h3>
<p class="small text-body-secondary mb-0">Jan 28, 2026</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h3 class="h6 text-truncate">Joining online: how the virtual pass works: Three days of keynotes, hands-on workshops and evening meetups.</h3>
<p class="small text-body-secondary mb-0">Dec 13, 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.
Ethan Hughes19:30
Workshops are limited to thirty seats, so everyone gets hands-on time. Sponsors meet decision-makers in a relaxed, friendly setting.
Hana Morgan08:00
The networking app helps you meet the right people before you arrive. Every attendee receives a certificate of participation.
Jonah Novak13:15
Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right.
<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-5.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">Ethan Hughes</strong><small class="ms-auto ps-2 text-body-secondary">19:30</small>
</div>
<div class="small text-body-secondary text-truncate">
Workshops are limited to thirty seats, so everyone gets hands-on time. Sponsors meet decision-makers in a relaxed, friendly setting.
</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">Hana Morgan</strong><small class="ms-auto ps-2 text-body-secondary">08:00</small>
</div>
<div class="small text-body-secondary text-truncate">
The networking app helps you meet the right people before you arrive. Every attendee receives a certificate of participation.
</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-9.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">Jonah Novak</strong><small class="ms-auto ps-2 text-body-secondary">13: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 detail is handled by people who care about getting it right.
</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/design/getting-started-with-the-new-dashboard">example.com/workflow/tutorial/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.
VIP pass Keynote edition
$836.00
Workshop ticket Workshop edition
$145.00
Masterclass Workshop edition
$234.00
Virtual pass Webinar edition
$103.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">
VIP pass Keynote edition
</div>
<strong class="small">$836.00</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">
Workshop ticket Workshop edition
</div>
<strong class="small">$145.00</strong>
</div>
</div>
<div class="col-6 col-md-3">
<div class="border rounded p-2">
<img src="../assets/img/product-9.svg" alt="" class="img-fluid rounded mb-1">
<div class="small text-truncate">
Masterclass Workshop edition
</div>
<strong class="small">$234.00</strong>
</div>
</div>
<div class="col-6 col-md-3">
<div class="border rounded p-2">
<img src="../assets/img/product-5.svg" alt="" class="img-fluid rounded mb-1">
<div class="small text-truncate">
Virtual pass Webinar edition
</div>
<strong class="small">$103.00</strong>
</div>
</div>
</div>12Truncated chips
Badges with a max width so long labels never break the row.
Behind the scenes: building the stageTen talks you should not miss this yearHow to pitch a talk that gets acceptedA guide to the city for visiting attendees
<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">Behind the scenes: building the stage</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">Ten talks you should not miss this year</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">How to pitch a talk that gets accepted</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">A guide to the city for visiting attendees</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">Novaium Flow</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-7.svg" alt="" width="24" height="24" class="rounded-circle"><span class="text-truncate">Isla Nguyen (Frontend Engineer)</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
Friendly people answer your questions quickly, by phone, chat or email. Virtual passes let you join the main stage live from anywhere.
With min-width: 0
The networking app helps you meet the right people before you arrive. Workshops are limited to thirty seats, so everyone gets hands-on time.
<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">
Friendly people answer your questions quickly, by phone, chat or email. Virtual passes let you join the main stage live from anywhere.
</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">
The networking app helps you meet the right people before you arrive. Workshops are limited to thirty seats, so everyone gets hands-on time.
</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">Speaker management Fast community 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" aria-hidden="true"></i><span class="text-truncate">Ticketing Practical launch 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">Networking app Elegant experience smart</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">Sponsorship Clear story calm</span></a></li>
</ul>
</nav>16Kanban card titles
Narrow board columns keep task titles tidy with truncation.
To do
Looking back at a busy season
What our attendees asked us most
Doing
Our favourite tips for busy weeks
Five things we learned this year
Done
How to choose the right ticket
A beginner's guide to getting started
<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">
Looking back at a busy season
</div>
<div class="bg-body border rounded p-2 mt-2 small text-truncate">
What our attendees asked us most
</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">
Our favourite tips for busy weeks
</div>
<div class="bg-body border rounded p-2 mt-2 small text-truncate">
Five things we learned this year
</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">
How to choose the right ticket
</div>
<div class="bg-body border rounded p-2 mt-2 small text-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="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">Tariq Okafor, 376 Station Street, Montreal 83237, Canada</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">Sponsorship for attendees</span> </button>
<ul class="dropdown-menu" aria-labelledby="hp-dd-1242">
<li><a class="dropdown-item" href="#">Venue booking</a></li>
<li><a class="dropdown-item" href="#">Speaker management</a></li>
</ul>
</div>19Playlist
Long episode or track titles truncate while the duration stays aligned.
- Talks, workshops and new friendships4:48
- Big ideas, small rooms, real conversations3:55
- Ideas on stage, connections everywhere4:45
<ol class="list-group list-group-numbered">
<li class="list-group-item d-flex gap-2"><span class="text-truncate">Talks, workshops and new friendships</span><small class="ms-auto text-body-secondary">4:48</small></li>
<li class="list-group-item d-flex gap-2"><span class="text-truncate">Big ideas, small rooms, real conversations</span><small class="ms-auto text-body-secondary">3:55</small></li>
<li class="list-group-item d-flex gap-2"><span class="text-truncate">Ideas on stage, connections everywhere</span><small class="ms-auto text-body-secondary">4:45</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. We measure success by how many attendees come back and tell their friends.
<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. We measure success by how many attendees come back and tell their friends.">We listen first, then build a plan around what you actually need. We measure success by how many attendees come back and tell their friends.</span>