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.

Pause or change your membership any time, with no long contracts. Online coaching keeps you on track when you travel.

<p class="text-truncate hp-tt mb-0" style="max-width:18rem">Pause or change your membership any time, with no long contracts. Online coaching keeps you on track when you travel.</p>

2Inline-block inside a sentence

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

Last edited by Chloe Alvarez and Nadia Carter 49 min ago.

<p class="mb-0">Last edited by <span class="d-inline-block text-truncate align-bottom hp-tt" style="max-width:8rem">Chloe Alvarez and Nadia Carter</span> 49 min ago.</p>

3Inbox preview

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

Ethan KimHow to choose the right class – Our team has done this many times, so you never have to guess. Open 24 hours, so you can train whenever it suits your day.
Leo OrtegaRunning your first 5K: an eight-week plan – Beginners are always welcome, with an intro session included. Small group classes mean your coach knows your name and your form.
Elena HarlowWhat our members asked us most – Thousands of members already trust us, and we work hard to keep it that way. 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">Ethan Kim</strong><span class="text-truncate small"><span class="fw-semibold">How to choose the right class</span> &ndash; Our team has done this many times, so you never have to guess. Open 24 hours, so you can train whenever it suits your day.</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">Running your first 5K: an eight-week plan</span> &ndash; Beginners are always welcome, with an intro session included. Small group classes mean your coach knows your name and your form.</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">What our members asked us most</span> &ndash; Thousands of members already trust us, and we work hard to keep it that way. 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
#PO-2618	We keep things simple, so you can focus on what matters to you.	$32.70
#TX-3325	We listen first, then build a plan around what you actually need.	$126.90
#ORD-5852	Friendly people answer your questions quickly, by phone, chat or email.	$84.09

<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>#PO-2618</td>
        <td class="text-truncate" style="max-width:12rem">We keep things simple, so you can focus on what matters to you.</td>
        <td class="text-end">$32.70</td>
      </tr>
      <tr>
        <td>#TX-3325</td>
        <td class="text-truncate" style="max-width:12rem">We listen first, then build a plan around what you actually need.</td>
        <td class="text-end">$126.90</td>
      </tr>
      <tr>
        <td>#ORD-5852</td>
        <td class="text-truncate" style="max-width:12rem">Friendly people answer your questions quickly, by phone, chat or email.</td>
        <td class="text-end">$84.09</td>
      </tr>
    </tbody>
  </table>
</div>

5Long file names

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

building-a-workout-habit-that-lasts-final-version-3.docx70 KB
five-things-we-learned-this-year-final-version-9.docx540 KB
a-beginner's-guide-to-getting-started-final-version-6.docx569 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">building-a-workout-habit-that-lasts-final-version-3.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">70 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">five-things-we-learned-this-year-final-version-9.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">540 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">a-beginner&#39;s-guide-to-getting-started-final-version-6.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">569 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="#">HIIT</a></li>
    <li class="breadcrumb-item active text-truncate" aria-current="page">Pause or change your membership any time, with no long contracts.</li>
  </ol>
</nav>

7Notification preview

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

Sofia Moreau replied: Open 24 hours, so you can train whenever it suits your day.9 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">Sofia Moreau replied: Open 24 hours, so you can train whenever it suits your day.</strong><small class="text-body-secondary">9 hours ago</small>
  </div>
</div>

8Equal card titles

Truncated titles keep a grid of cards the same height.

Running your first 5K: an eight-week plan: Online coaching keeps you on track when you travel.

Aug 19, 2026

A beginner's guide to strength training: Every detail is handled by people who care about getting it right.

Aug 4, 2026

Building a workout habit that lasts: More than sixty classes a week, from sunrise yoga to late-night spin.

Aug 14, 2026

<div class="row g-3">
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 text-truncate">Running your first 5K: an eight-week plan: Online coaching keeps you on track when you travel.</h3>
        <p class="small text-body-secondary mb-0">Aug 19, 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 strength training: Every detail is handled by people who care about getting it right.</h3>
        <p class="small text-body-secondary mb-0">Aug 4, 2026</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 text-truncate">Building a workout habit that lasts: More than sixty classes a week, from sunrise yoga to late-night spin.</h3>
        <p class="small text-body-secondary mb-0">Aug 14, 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.

Kai Ashford07:45

Certified coaches design every session around your level and your goals. Modern equipment is cleaned, serviced and ready every day.

Aria Patel16:30

Beginners are always welcome, with an intro session included. Clear prices, honest advice and no surprises along the way.

Owen Lindqvist10:45

Small group classes mean your coach knows your name and your form. Start in minutes and get help from a real person whenever you need it.

<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-7.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">Kai Ashford</strong><small class="ms-auto ps-2 text-body-secondary">07:45</small>
    </div>
    <div class="small text-body-secondary text-truncate">
      Certified coaches design every session around your level and your goals. Modern equipment is cleaned, serviced and ready every day.
    </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">Aria Patel</strong><small class="ms-auto ps-2 text-body-secondary">16:30</small>
    </div>
    <div class="small text-body-secondary text-truncate">
      Beginners are always welcome, with an intro session included. Clear prices, honest advice and no surprises along the way.
    </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">Owen Lindqvist</strong><small class="ms-auto ps-2 text-body-secondary">10:45</small>
    </div>
    <div class="small text-body-secondary text-truncate">
      Small group classes mean your coach knows your name and your form. Start in minutes and get help from a real person whenever you need it.
    </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/launch/release/getting-started-with-the-new-dashboard">example.com/idea/insights/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.

Bootcamp HIIT edition

$140.00

Yoga retreat Yoga edition

$389.99

Sauna session Recovery edition

$17.00

Monthly pass Strength edition

$53.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">
        Bootcamp HIIT edition
      </div>
      <strong class="small">$140.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">
        Yoga retreat Yoga edition
      </div>
      <strong class="small">$389.99</strong>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="border rounded p-2">
      <img src="../assets/img/product-8.svg" alt="" class="img-fluid rounded mb-1">
      <div class="small text-truncate">
        Sauna session Recovery edition
      </div>
      <strong class="small">$17.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 pass Strength edition
      </div>
      <strong class="small">$53.00</strong>
    </div>
  </div>
</div>

12Truncated chips

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

Five things we learned this yearHow to stay motivated through winterWhat to eat before a morning workoutHow to choose the right class

<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">Five things we learned this year</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">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 choose the right class</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">Hive Labs</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-3.svg" alt="" width="24" height="24" class="rounded-circle"><span class="text-truncate">Ravi Mensah (Customer Success)</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

Nutrition plans fit your routine and the food you actually enjoy. Our team has done this many times, so you never have to guess.

New

With min-width: 0

We measure success by how many members come back and tell their friends. Our recovery spa has a sauna, cold plunge and massage rooms.

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">
          Nutrition plans fit your routine and the food you actually enjoy. Our team has done this many times, so you never have to guess.
        </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. Our recovery spa has a sauna, cold plunge and massage rooms.
        </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">Online coaching Reliable idea powerful</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">Nutrition plans Fast project bright</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">Personal training Elegant idea 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-fill" aria-hidden="true"></i><span class="text-truncate">Recovery spa Calm goal simple</span></a></li>
  </ul>
</nav>

16Kanban card titles

Narrow board columns keep task titles tidy with truncation.

To do

Our favourite tips for busy weeks

Our most popular classes this month

Doing

Why recovery matters as much as training

A beginner's guide to getting started

Done

How our coaches plan a new class

Five stretches for desk workers

<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">
        Our favourite tips for busy weeks
      </div>
      <div class="bg-body border rounded p-2 mt-2 small text-truncate">
        Our most popular classes this month
      </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">
        Why recovery matters as much as training
      </div>
      <div class="bg-body border rounded p-2 mt-2 small text-truncate">
        A beginner&#39;s guide to getting started
      </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 our coaches plan a new class
      </div>
      <div class="bg-body border rounded p-2 mt-2 small text-truncate">
        Five stretches for desk workers
      </div>
    </div>
  </div>
</div>

17Order summary address

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

Isla Fischer, 83 Cedar Lane, Melbourne 60184, Australia 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">Isla Fischer, 83 Cedar Lane, Melbourne 60184, Australia</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">Yoga for members</span> </button>
  <ul class="dropdown-menu" aria-labelledby="hp-dd-1242">
    <li><a class="dropdown-item" href="#">Online coaching</a></li>
    <li><a class="dropdown-item" href="#">Recovery spa</a></li>
  </ul>
</div>

19Playlist

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

Your fitness journey starts now5:17
Better habits start this week2:18
Fitness for every body5:45

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex gap-2"><span class="text-truncate">Your fitness journey starts now</span><small class="ms-auto text-body-secondary">5:17</small></li>
  <li class="list-group-item d-flex gap-2"><span class="text-truncate">Better habits start this week</span><small class="ms-auto text-body-secondary">2:18</small></li>
  <li class="list-group-item d-flex gap-2"><span class="text-truncate">Fitness for every body</span><small class="ms-auto text-body-secondary">5:45</small></li>
</ol>

20Full text in a tooltip

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

Track your progress in the app and see how far you have come. We listen first, then build a plan around what you actually need.

<span class="d-inline-block text-truncate hp-tt" style="max-width:16rem" tabindex="0" data-ui-toggle="tooltip" data-ui-title="Track your progress in the app and see how far you have come. We listen first, then build a plan around what you actually need.">Track your progress in the app and see how far you have come. We listen first, then build a plan around what you actually need.</span>