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.

Track your progress in the app and see how far you have come. Open 24 hours, so you can train whenever it suits your day.

<p class="text-truncate hp-tt mb-0" style="max-width:18rem">Track your progress in the app and see how far you have come. Open 24 hours, so you can train whenever it suits your day.</p>

2Inline-block inside a sentence

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

Last edited by Leo Delgado and Lucas Lindqvist 5 hours ago.

<p class="mb-0">Last edited by <span class="d-inline-block text-truncate align-bottom hp-tt" style="max-width:8rem">Leo Delgado and Lucas Lindqvist</span> 5 hours ago.</p>

3Inbox preview

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

Kai RossiHow to choose the right class – Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email.
Freya LarsenThe small habits that make a big difference – Online coaching keeps you on track when you travel. Clear prices, honest advice and no surprises along the way.
Theo FischerRunning your first 5K: an eight-week plan – We listen first, then build a plan around what you actually need. Community events keep you motivated, from fun runs to workshops.

<ul class="list-group">
  <li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Kai Rossi</strong><span class="text-truncate small"><span class="fw-semibold">How to choose the right class</span> &ndash; Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email.</span></li>
  <li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Freya Larsen</strong><span class="text-truncate small"><span class="fw-semibold">The small habits that make a big difference</span> &ndash; Online coaching keeps you on track when you travel. Clear prices, honest advice and no surprises along the way.</span></li>
  <li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Theo Fischer</strong><span class="text-truncate small"><span class="fw-semibold">Running your first 5K: an eight-week plan</span> &ndash; We listen first, then build a plan around what you actually need. Community events keep you motivated, from fun runs to workshops.</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-4785	Modern equipment is cleaned, serviced and ready every day.	$340.24
#PO-3153	Thousands of members already trust us, and we work hard to keep it that way.	$67.94
#INV-7332	Nutrition plans fit your routine and the food you actually enjoy.	$314.88

<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-4785</td>
        <td class="text-truncate" style="max-width:12rem">Modern equipment is cleaned, serviced and ready every day.</td>
        <td class="text-end">$340.24</td>
      </tr>
      <tr>
        <td>#PO-3153</td>
        <td class="text-truncate" style="max-width:12rem">Thousands of members already trust us, and we work hard to keep it that way.</td>
        <td class="text-end">$67.94</td>
      </tr>
      <tr>
        <td>#INV-7332</td>
        <td class="text-truncate" style="max-width:12rem">Nutrition plans fit your routine and the food you actually enjoy.</td>
        <td class="text-end">$314.88</td>
      </tr>
    </tbody>
  </table>
</div>

5Long file names

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

what-our-members-asked-us-most-final-version-5.docx789 KB
hiit-twice-a-week:-how-hard-is-hard-enough?-final-version-3.docx791 KB
our-most-popular-classes-this-month-final-version-8.docx730 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-fill" aria-hidden="true"></i></span><span class="text-truncate">what-our-members-asked-us-most-final-version-5.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">789 KB</small></li>
  <li class="d-flex align-items-center gap-2"><span class="text-primary"><i class="bi bi-file-earmark-text-fill" aria-hidden="true"></i></span><span class="text-truncate">hiit-twice-a-week:-how-hard-is-hard-enough?-final-version-3.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">791 KB</small></li>
  <li class="d-flex align-items-center gap-2"><span class="text-primary"><i class="bi bi-file-earmark-text-fill" aria-hidden="true"></i></span><span class="text-truncate">our-most-popular-classes-this-month-final-version-8.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">730 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="#">Yoga</a></li>
    <li class="breadcrumb-item active text-truncate" aria-current="page">Our recovery spa has a sauna, cold plunge and massage rooms.</li>
  </ol>
</nav>

7Notification preview

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

Nadia Kim replied: More than sixty classes a week, from sunrise yoga to late-night spin.14 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">Nadia Kim replied: More than sixty classes a week, from sunrise yoga to late-night spin.</strong><small class="text-body-secondary">14 min ago</small>
  </div>
</div>

8Equal card titles

Truncated titles keep a grid of cards the same height.

A beginner's guide to strength training: Small group classes mean your coach knows your name and your form.

Nov 27, 2025

A beginner's guide to getting started: Track your progress in the app and see how far you have come.

Apr 6, 2026

What our members asked us most: Small group classes mean your coach knows your name and your form.

Mar 29, 2026

<div class="row g-3">
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 text-truncate">A beginner&#39;s guide to strength training: Small group classes mean your coach knows your name and your form.</h3>
        <p class="small text-body-secondary mb-0">Nov 27, 2025</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: Track your progress in the app and see how far you have come.</h3>
        <p class="small text-body-secondary mb-0">Apr 6, 2026</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 text-truncate">What our members asked us most: Small group classes mean your coach knows your name and your form.</h3>
        <p class="small text-body-secondary mb-0">Mar 29, 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.

Luna Quinn12:30

Community events keep you motivated, from fun runs to workshops. More than sixty classes a week, from sunrise yoga to late-night spin.

Felix Harlow20:45

Pause or change your membership any time, with no long contracts. Our team has done this many times, so you never have to guess.

Priya Brennan09:00

Open 24 hours, so you can train whenever it suits your day. Nutrition plans fit your routine and the food you actually enjoy.

<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-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">Luna Quinn</strong><small class="ms-auto ps-2 text-body-secondary">12:30</small>
    </div>
    <div class="small text-body-secondary text-truncate">
      Community events keep you motivated, from fun runs to workshops. More than sixty classes a week, from sunrise yoga to late-night spin.
    </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">Felix Harlow</strong><small class="ms-auto ps-2 text-body-secondary">20:45</small>
    </div>
    <div class="small text-body-secondary text-truncate">
      Pause or change your membership any time, with no long contracts. Our team has done this many times, so you never have to guess.
    </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-12.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">Priya Brennan</strong><small class="ms-auto ps-2 text-body-secondary">09:00</small>
    </div>
    <div class="small text-body-secondary text-truncate">
      Open 24 hours, so you can train whenever it suits your day. Nutrition plans fit your routine and the food you actually enjoy.
    </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/design/getting-started-with-the-new-dashboard">example.com/goal/release/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.

Spin class pack Cardio edition

$103.00

Nutrition guide Recovery edition

$28.99

Bootcamp HIIT edition

$125.99

Monthly pass Strength edition

$46.00

<div class="row g-2">
  <div class="col-6 col-md-3">
    <div class="border rounded p-2">
      <img src="../assets/img/product-7.svg" alt="" class="img-fluid rounded mb-1">
      <div class="small text-truncate">
        Spin class pack Cardio edition
      </div>
      <strong class="small">$103.00</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">
        Nutrition guide Recovery edition
      </div>
      <strong class="small">$28.99</strong>
    </div>
  </div>
  <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">
        Bootcamp HIIT edition
      </div>
      <strong class="small">$125.99</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 pass Strength edition
      </div>
      <strong class="small">$46.00</strong>
    </div>
  </div>
</div>

12Truncated chips

Badges with a max width so long labels never break the row.

Our favourite tips for busy weeksWhat to eat before a morning workoutHow to stay motivated through winterRunning your first 5K: an eight-week 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">Our favourite tips for busy weeks</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">What to eat before a morning workout</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">How to stay motivated through winter</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">Running your first 5K: an eight-week 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">Kiteora HQ</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">Diego 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

Beginners are always welcome, with an intro session included. Start in minutes and get help from a real person whenever you need it.

New

With min-width: 0

We measure success by how many members come back and tell their friends. Modern equipment is cleaned, serviced and ready every day.

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">
          Beginners are always welcome, with an intro session included. Start in minutes and get help from a real person whenever you need it.
        </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">
          We measure success by how many members come back and tell their friends. Modern equipment is cleaned, serviced and ready every day.
        </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-fill" aria-hidden="true"></i><span class="text-truncate">Nutrition plans Secure routine 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-fill" aria-hidden="true"></i><span class="text-truncate">Recovery spa Elegant process clear</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-fill" aria-hidden="true"></i><span class="text-truncate">Yoga Reliable team flexible</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-fill" aria-hidden="true"></i><span class="text-truncate">Yoga Fast community secure</span></a></li>
  </ul>
</nav>

16Kanban card titles

Narrow board columns keep task titles tidy with truncation.

To do

How our coaches plan a new class

How to choose the right class

Doing

Five things we learned this year

Five stretches for desk workers

Done

The small habits that make a big difference

Looking back at a busy season

<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">
        How our coaches plan a new class
      </div>
      <div class="bg-body border rounded p-2 mt-2 small text-truncate">
        How to choose the right class
      </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">
        Five things we learned this year
      </div>
      <div class="bg-body border rounded p-2 mt-2 small text-truncate">
        Five stretches for desk workers
      </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">
        The small habits that make a big difference
      </div>
      <div class="bg-body border rounded p-2 mt-2 small text-truncate">
        Looking back at a busy season
      </div>
    </div>
  </div>
</div>

17Order summary address

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

Zoe Mensah, 70 Orchard Close, Auckland 10829, New Zealand 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">Zoe Mensah, 70 Orchard Close, Auckland 10829, New Zealand</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">Online coaching for members</span> </button>
  <ul class="dropdown-menu" aria-labelledby="hp-dd-1242">
    <li><a class="dropdown-item" href="#">Yoga</a></li>
    <li><a class="dropdown-item" href="#">Nutrition plans</a></li>
  </ul>
</div>

19Playlist

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

Classes that keep you coming back5:50
Find the workout you will love4:58
Real coaches, real results5:23

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex gap-2"><span class="text-truncate">Classes that keep you coming back</span><small class="ms-auto text-body-secondary">5:50</small></li>
  <li class="list-group-item d-flex gap-2"><span class="text-truncate">Find the workout you will love</span><small class="ms-auto text-body-secondary">4:58</small></li>
  <li class="list-group-item d-flex gap-2"><span class="text-truncate">Real coaches, real results</span><small class="ms-auto text-body-secondary">5:23</small></li>
</ol>

20Full text in a tooltip

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

Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.

<span class="d-inline-block text-truncate hp-tt" style="max-width:16rem" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.">Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.</span>