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.

Volunteers give their time in schools, shelters and food banks every week. We have helped more than two hundred thousand people since we started.

<p class="text-truncate hp-tt mb-0" style="max-width:18rem">Volunteers give their time in schools, shelters and food banks every week. We have helped more than two hundred thousand people since we started.</p>

2Inline-block inside a sentence

Inline elements need d-inline-block plus a max width to truncate.

Last edited by Hana Ibrahim and Ethan Novak yesterday.

<p class="mb-0">Last edited by <span class="d-inline-block text-truncate align-bottom hp-tt" style="max-width:8rem">Hana Ibrahim and Ethan Novak</span> yesterday.</p>

3Inbox preview

Subject and preview text cut to one line in an email list.

Liam LarsenOur favourite tips for busy weeks – You receive photos and updates showing exactly what your donation achieved. Clean water wells are built with and maintained by local communities.
Elena HarlowStories from the families we support – Our annual report is independently audited and published in full. Every detail is handled by people who care about getting it right.
Samir NguyenHow your donations built three new classrooms – A school kit costs less than a cinema ticket and lasts a whole year. Local partners know their communities and make sure help arrives where it matters.

<ul class="list-group">
  <li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Liam Larsen</strong><span class="text-truncate small"><span class="fw-semibold">Our favourite tips for busy weeks</span> &ndash; You receive photos and updates showing exactly what your donation achieved. Clean water wells are built with and maintained by local communities.</span></li>
  <li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Elena Harlow</strong><span class="text-truncate small"><span class="fw-semibold">Stories from the families we support</span> &ndash; Our annual report is independently audited and published in full. Every detail is handled by people who care about getting it right.</span></li>
  <li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Samir Nguyen</strong><span class="text-truncate small"><span class="fw-semibold">How your donations built three new classrooms</span> &ndash; A school kit costs less than a cinema ticket and lasts a whole year. Local partners know their communities and make sure help arrives where it matters.</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-3718	Every donation is tax-deductible, and receipts arrive by email instantly.	$195.12
#TX-8369	Thousands of donors already trust us, and we work hard to keep it that way.	$178.99
#INV-9880	Ninety cents of every dollar goes directly to the projects you support.	$214.24

<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-3718</td>
        <td class="text-truncate" style="max-width:12rem">Every donation is tax-deductible, and receipts arrive by email instantly.</td>
        <td class="text-end">$195.12</td>
      </tr>
      <tr>
        <td>#TX-8369</td>
        <td class="text-truncate" style="max-width:12rem">Thousands of donors already trust us, and we work hard to keep it that way.</td>
        <td class="text-end">$178.99</td>
      </tr>
      <tr>
        <td>#INV-9880</td>
        <td class="text-truncate" style="max-width:12rem">Ninety cents of every dollar goes directly to the projects you support.</td>
        <td class="text-end">$214.24</td>
      </tr>
    </tbody>
  </table>
</div>

5Long file names

File names shorten while the size stays visible at the end.

looking-back-at-a-busy-season-final-version-7.docx730 KB
how-to-choose-the-right-campaign-final-version-6.docx122 KB
why-monthly-giving-makes-such-a-difference-final-version-7.docx792 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">looking-back-at-a-busy-season-final-version-7.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">730 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">how-to-choose-the-right-campaign-final-version-6.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">122 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">why-monthly-giving-makes-such-a-difference-final-version-7.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">792 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="#">Environment</a></li>
    <li class="breadcrumb-item active text-truncate" aria-current="page">Monthly gifts let us plan ahead and respond quickly when disaster strikes.</li>
  </ol>
</nav>

7Notification preview

A toast-like card where the message preview stays on one line.

Tariq Duarte replied: We keep things simple, so you can focus on what matters to you.26 min 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">Tariq Duarte replied: We keep things simple, so you can focus on what matters to you.</strong><small class="text-body-secondary">26 min ago</small>
  </div>
</div>

8Equal card titles

Truncated titles keep a grid of cards the same height.

Our yearly impact report, explained: We listen first, then build a plan around what you actually need.

Apr 14, 2026

A beginner's guide to getting started: Companies can match employee donations and double their impact.

Apr 12, 2026

The small habits that make a big difference: Monthly gifts let us plan ahead and respond quickly when disaster strikes.

Nov 8, 2025

<div class="row g-3">
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 text-truncate">Our yearly impact report, explained: We listen first, then build a plan around what you actually need.</h3>
        <p class="small text-body-secondary mb-0">Apr 14, 2026</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 text-truncate">A beginner&#39;s guide to getting started: Companies can match employee donations and double their impact.</h3>
        <p class="small text-body-secondary mb-0">Apr 12, 2026</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 text-truncate">The small habits that make a big difference: Monthly gifts let us plan ahead and respond quickly when disaster strikes.</h3>
        <p class="small text-body-secondary mb-0">Nov 8, 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.

Lucas Haddad12:00

We have helped more than two hundred thousand people since we started. A school kit costs less than a cinema ticket and lasts a whole year.

Sofia Lindqvist19:15

We keep things simple, so you can focus on what matters to you. Local partners know their communities and make sure help arrives where it matters.

Nadia Brennan10:00

Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email.

<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-2.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">Lucas Haddad</strong><small class="ms-auto ps-2 text-body-secondary">12:00</small>
    </div>
    <div class="small text-body-secondary text-truncate">
      We have helped more than two hundred thousand people since we started. A school kit costs less than a cinema ticket and lasts a whole year.
    </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-4.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">Sofia Lindqvist</strong><small class="ms-auto ps-2 text-body-secondary">19:15</small>
    </div>
    <div class="small text-body-secondary text-truncate">
      We keep things simple, so you can focus on what matters to you. Local partners know their communities and make sure help arrives where it matters.
    </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-10.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">Nadia Brennan</strong><small class="ms-auto ps-2 text-body-secondary">10:00</small>
    </div>
    <div class="small text-body-secondary text-truncate">
      Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email.
    </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/journey/case study/getting-started-with-the-new-dashboard">example.com/project/update/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.

Solar lamp Environment edition

$19.00

Monthly gift Relief edition

$27.00

Shelter support Animals edition

$40.99

Library books Education edition

$49.00

<div class="row g-2">
  <div class="col-6 col-md-3">
    <div class="border rounded p-2">
      <img src="../assets/img/product-11.svg" alt="" class="img-fluid rounded mb-1">
      <div class="small text-truncate">
        Solar lamp Environment edition
      </div>
      <strong class="small">$19.00</strong>
    </div>
  </div>
  <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">
        Monthly gift Relief edition
      </div>
      <strong class="small">$27.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">
        Shelter support Animals edition
      </div>
      <strong class="small">$40.99</strong>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="border rounded p-2">
      <img src="../assets/img/product-12.svg" alt="" class="img-fluid rounded mb-1">
      <div class="small text-truncate">
        Library books Education 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.

Why we plant trees with the schools we buildLooking back at a busy seasonMeet the partners behind our water projectsOur favourite tips for busy weeks

<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">Why we plant trees with the schools we build</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">Looking back at a busy season</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">Meet the partners behind our water projects</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">Our favourite tips for busy weeks</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">Bloom Kit</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-6.svg" alt="" width="24" height="24" class="rounded-circle"><span class="text-truncate">Kai Whitaker (Project Manager)</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

You receive photos and updates showing exactly what your donation achieved. Thousands of donors already trust us, and we work hard to keep it that way.

New

With min-width: 0

Start in minutes and get help from a real person whenever you need it. Companies can match employee donations and double their impact.

New

<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">
          You receive photos and updates showing exactly what your donation achieved. Thousands of donors already trust us, and we work hard to keep it that way.
        </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">
          Start in minutes and get help from a real person whenever you need it. Companies can match employee donations and double their impact.
        </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">Disaster response Fast 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">Disaster response Focused 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">Animal rescue Elegant goal 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">Education fund Clear community simple</span></a></li>
  </ul>
</nav>

16Kanban card titles

Narrow board columns keep task titles tidy with truncation.

To do

Inside the shelter: from rescue to new home

Five things we learned this year

Doing

What happens after a disaster appeal

Ten ways to fundraise with friends

Done

Why monthly giving makes such a difference

How to choose the right campaign

<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">
        Inside the shelter: from rescue to new home
      </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">Doing</small>
      <div class="bg-body border rounded p-2 mt-2 small text-truncate">
        What happens after a disaster appeal
      </div>
      <div class="bg-body border rounded p-2 mt-2 small text-truncate">
        Ten ways to fundraise with friends
      </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">
        Why monthly giving makes such a difference
      </div>
      <div class="bg-body border rounded p-2 mt-2 small text-truncate">
        How to choose the right campaign
      </div>
    </div>
  </div>
</div>

17Order summary address

A long shipping address truncated in a summary line, with an edit link.

Nora Alvarez, 13 Hillcrest Road, Vancouver 21588, Canada Change

<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">Nora Alvarez, 13 Hillcrest Road, Vancouver 21588, 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">Animal rescue for donors</span> </button>
  <ul class="dropdown-menu" aria-labelledby="hp-dd-1242">
    <li><a class="dropdown-item" href="#">Education fund</a></li>
    <li><a class="dropdown-item" href="#">Volunteer programs</a></li>
  </ul>
</div>

19Playlist

Long episode or track titles truncate while the duration stays aligned.

Real help, where it is needed most4:54
Small acts, big impact3:11
Be part of the change4:51

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex gap-2"><span class="text-truncate">Real help, where it is needed most</span><small class="ms-auto text-body-secondary">4:54</small></li>
  <li class="list-group-item d-flex gap-2"><span class="text-truncate">Small acts, big impact</span><small class="ms-auto text-body-secondary">3:11</small></li>
  <li class="list-group-item d-flex gap-2"><span class="text-truncate">Be part of the change</span><small class="ms-auto text-body-secondary">4:51</small></li>
</ol>

20Full text in a tooltip

Offer the complete text in a tooltip so nothing is lost when it is truncated.

Our annual report is independently audited and published in full. Clear prices, honest advice and no surprises along the way.

<span class="d-inline-block text-truncate hp-tt" style="max-width:16rem" tabindex="0" data-ui-toggle="tooltip" data-ui-title="Our annual report is independently audited and published in full. Clear prices, honest advice and no surprises along the way.">Our annual report is independently audited and published in full. Clear prices, honest advice and no surprises along the way.</span>