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 reliable community lets new ideas to life without the usual hassle. A practical routine shows customers coming back at a fair price.
<p class="text-truncate hp-tt mb-0" style="max-width:18rem">A reliable community lets new ideas to life without the usual hassle. A practical routine shows customers coming back at a fair price.</p>2Inline-block inside a sentence
Inline elements need d-inline-block plus a max width to truncate.
Last edited by Amara Ortega and Arjun Haddad 9 hours ago.
<p class="mb-0">Last edited by <span class="d-inline-block text-truncate align-bottom hp-tt" style="max-width:8rem">Amara Ortega and Arjun Haddad</span> 9 hours ago.</p>3Inbox preview
Subject and preview text cut to one line in an email list.
- Maya Moreau3 lessons from our release – Our legal support connects customers coming back all year round. Our home valuation connects new ideas to life from the very first day.
- Liam NguyenReliable ways to improve your project – A elegant workflow shows projects moving forward without extra tools. Our virtual tours connects decisions quicker and clearer with friendly support.
- Liam PatelProject notes for buyers – A flexible process connects customers coming back with friendly support. A clear plan shows your work organised with friendly support.
<ul class="list-group">
<li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Maya Moreau</strong><span class="text-truncate small"><span class="fw-semibold">3 lessons from our release</span> – Our legal support connects customers coming back all year round. Our home valuation connects new ideas to life from the very first day.</span></li>
<li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Liam Nguyen</strong><span class="text-truncate small"><span class="fw-semibold">Reliable ways to improve your project</span> – A elegant workflow shows projects moving forward without extra tools. Our virtual tours connects decisions quicker and clearer with friendly support.</span></li>
<li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Liam Patel</strong><span class="text-truncate small"><span class="fw-semibold">Project notes for buyers</span> – A flexible process connects customers coming back with friendly support. A clear plan shows your work organised with friendly support.</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-2937 | Our home valuation keeps time back in your day at a fair price. | $132.07 |
| #INV-3302 | Our virtual tours lets your work organised for teams of every size. | $142.49 |
| #TX-2639 | The new fast paperwork gives decisions quicker and clearer wherever you are. | $389.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>#TX-2937</td>
<td class="text-truncate" style="max-width:12rem">Our home valuation keeps time back in your day at a fair price.</td>
<td class="text-end">$132.07</td>
</tr>
<tr>
<td>#INV-3302</td>
<td class="text-truncate" style="max-width:12rem">Our virtual tours lets your work organised for teams of every size.</td>
<td class="text-end">$142.49</td>
</tr>
<tr>
<td>#TX-2639</td>
<td class="text-truncate" style="max-width:12rem">The new fast paperwork gives decisions quicker and clearer wherever you are.</td>
<td class="text-end">$389.11</td>
</tr>
</tbody>
</table>
</div>5Long file names
File names shorten while the size stays visible at the end.
- the-bright-journey-checklist-final-version-5.docx172 KB
- inside-the-fast-journey-final-version-5.docx694 KB
- the-secure-team-checklist-final-version-4.docx898 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">the-bright-journey-checklist-final-version-5.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">172 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">inside-the-fast-journey-final-version-5.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">694 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">the-secure-team-checklist-final-version-4.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">898 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="#">Houses</a></li>
<li class="breadcrumb-item active text-truncate" aria-current="page">Our rental management helps results you can measure in just a few clicks.</li>
</ol>
</nav>7Notification preview
A toast-like card where the message preview stays on one line.
Elena Mensah replied: The new expert agents turns data easy to understand with friendly support.15 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">Elena Mensah replied: The new expert agents turns data easy to understand with friendly support.</strong><small class="text-body-secondary">15 hours ago</small>
</div>
</div>8Equal card titles
Truncated titles keep a grid of cards the same height.
How we rebuilt our idea: A friendly routine guides projects moving forward all year round.
Aug 12, 2026
How we rebuilt our workflow: A bright update connects new ideas to life all year round.
Aug 1, 2026
Dashboard notes for buyers: A honest update makes data easy to understand on any device.
Nov 30, 2025
<div class="row g-3">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h3 class="h6 text-truncate">How we rebuilt our idea: A friendly routine guides projects moving forward all year round.</h3>
<p class="small text-body-secondary mb-0">Aug 12, 2026</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h3 class="h6 text-truncate">How we rebuilt our workflow: A bright update connects new ideas to life all year round.</h3>
<p class="small text-body-secondary mb-0">Aug 1, 2026</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h3 class="h6 text-truncate">Dashboard notes for buyers: A honest update makes data easy to understand on any device.</h3>
<p class="small text-body-secondary mb-0">Nov 30, 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.
Noah Ortega20:30
A fast team keeps projects moving forward wherever you are. The new price alerts gives the whole team on the same page with friendly support.
Jonah Lindqvist14:30
This focused release shows data easy to understand for teams of every size. A elegant project lets data easy to understand all year round.
Zoe Kim12:15
Our rental management shows customers coming back wherever you are. Our mortgage advice helps customers coming back all year round.
<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-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">Noah Ortega</strong><small class="ms-auto ps-2 text-body-secondary">20:30</small>
</div>
<div class="small text-body-secondary text-truncate">
A fast team keeps projects moving forward wherever you are. The new price alerts gives the whole team on the same page with friendly support.
</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-1.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 Lindqvist</strong><small class="ms-auto ps-2 text-body-secondary">14:30</small>
</div>
<div class="small text-body-secondary text-truncate">
This focused release shows data easy to understand for teams of every size. A elegant project lets data easy to understand all year round.
</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-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">Zoe Kim</strong><small class="ms-auto ps-2 text-body-secondary">12:15</small>
</div>
<div class="small text-body-secondary text-truncate">
Our rental management shows customers coming back wherever you are. Our mortgage advice helps customers coming back all year round.
</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/story/tutorial/getting-started-with-the-new-dashboard">example.com/plan/how-to/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.
Family house Villas edition
$346.99
Garden villa Land edition
$92.50
Lake cottage Land edition
$186.99
City loft Houses edition
$208.50<div class="row g-2">
<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">
Family house Villas edition
</div>
<strong class="small">$346.99</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">
Garden villa Land edition
</div>
<strong class="small">$92.50</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">
Lake cottage Land edition
</div>
<strong class="small">$186.99</strong>
</div>
</div>
<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">
City loft Houses edition
</div>
<strong class="small">$208.50</strong>
</div>
</div>
</div>12Truncated chips
Badges with a max width so long labels never break the row.
Process notes for buyers3 lessons from our goalUpdate notes for buyers6 lessons from our plan
<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">Process notes for buyers</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">3 lessons from our goal</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">Update notes for buyers</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">6 lessons from our plan</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">Brand name 3</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">Amara Tanaka (Content Writer)</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
A flexible experience keeps every detail in view from the very first day. Our property search brings your work organised with friendly support.
With min-width: 0
Our rental management gives time back in your day at a fair price. Our mortgage advice brings new ideas to life on any device.
<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">
A flexible experience keeps every detail in view from the very first day. Our property search brings your work organised with friendly support.
</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">
Our rental management gives time back in your day at a fair price. Our mortgage advice brings new ideas to life on any device.
</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">Property search Fast update elegant</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">Virtual tours Modern release focused</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">Legal support Calm release secure</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">Home valuation Focused story honest</span></a></li>
</ul>
</nav>16Kanban card titles
Narrow board columns keep task titles tidy with truncation.
To do
The reliable launch checklist
A guide to rental management
Doing
What's new in villas
Fast ways to improve your release
Done
Inside the calm update
What's new in houses
<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">
The reliable launch checklist
</div>
<div class="bg-body border rounded p-2 mt-2 small text-truncate">
A guide to rental management
</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">
What's new in villas
</div>
<div class="bg-body border rounded p-2 mt-2 small text-truncate">
Fast ways to improve your release
</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">
Inside the calm update
</div>
<div class="bg-body border rounded p-2 mt-2 small text-truncate">
What's new in houses
</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">Mason Alvarez, 14 Willow Way, Seoul 85766, South Korea</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-bs-toggle="dropdown" aria-expanded="false" style="max-width:14rem"> <span class="text-truncate">Mortgage advice for buyers</span> </button>
<ul class="dropdown-menu" aria-labelledby="hp-dd-1242">
<li><a class="dropdown-item" href="#">Home valuation</a></li>
<li><a class="dropdown-item" href="#">Property search</a></li>
</ul>
</div>19Playlist
Long episode or track titles truncate while the duration stays aligned.
- Homes you will love coming back to5:39
- Smart property search, real advice3:39
- Your next address starts here2:43
<ol class="list-group list-group-numbered">
<li class="list-group-item d-flex gap-2"><span class="text-truncate">Homes you will love coming back to</span><small class="ms-auto text-body-secondary">5:39</small></li>
<li class="list-group-item d-flex gap-2"><span class="text-truncate">Smart property search, real advice</span><small class="ms-auto text-body-secondary">3:39</small></li>
<li class="list-group-item d-flex gap-2"><span class="text-truncate">Your next address starts here</span><small class="ms-auto text-body-secondary">2:43</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 price alerts gives customers coming back without extra tools. This reliable workflow gives data easy to understand with friendly support.
<span class="d-inline-block text-truncate hp-tt" style="max-width:16rem" tabindex="0" data-bs-toggle="tooltip" data-bs-title="The new price alerts gives customers coming back without extra tools. This reliable workflow gives data easy to understand with friendly support.">The new price alerts gives customers coming back without extra tools. This reliable workflow gives data easy to understand with friendly support.</span>