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 friendly launch lets every detail in view from the very first day. This calm idea helps time back in your day wherever you are.

<p class="text-truncate hp-tt mb-0" style="max-width:18rem">A friendly launch lets every detail in view from the very first day. This calm idea helps time back in your day wherever you are.</p>

2Inline-block inside a sentence

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

Last edited by Ruby Quinn and Owen Nguyen 20 min ago.

<p class="mb-0">Last edited by <span class="d-inline-block text-truncate align-bottom hp-tt" style="max-width:8rem">Ruby Quinn and Owen Nguyen</span> 20 min ago.</p>

3Inbox preview

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

Ava Tanaka9 lessons from our plan – A powerful release lets the whole team on the same page on any device. Our loyalty rewards connects your work organised from the very first day.
Nora RossiThe calm release checklist – This focused team keeps data easy to understand without extra tools. This powerful launch guides new ideas to life with friendly support.
Kai QuinnGoal notes for shoppers – This secure journey guides results you can measure on any device. This focused process helps customers coming back for teams of every size.

<ul class="list-group">
  <li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Ava Tanaka</strong><span class="text-truncate small"><span class="fw-semibold">9 lessons from our plan</span> &ndash; A powerful release lets the whole team on the same page on any device. Our loyalty rewards connects your work organised 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">Nora Rossi</strong><span class="text-truncate small"><span class="fw-semibold">The calm release checklist</span> &ndash; This focused team keeps data easy to understand without extra tools. This powerful launch guides new ideas to life with friendly support.</span></li>
  <li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Kai Quinn</strong><span class="text-truncate small"><span class="fw-semibold">Goal notes for shoppers</span> &ndash; This secure journey guides results you can measure on any device. This focused process helps customers coming back for teams of every size.</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-2517	A elegant project lets you focused on what matters for teams of every size.	$273.81
#PO-9099	The new sustainable materials connects you focused on what matters without the usual hassle.	$211.88
#INV-8764	This clear launch turns data easy to understand with friendly support.	$371.87

<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-2517</td>
        <td class="text-truncate" style="max-width:12rem">A elegant project lets you focused on what matters for teams of every size.</td>
        <td class="text-end">$273.81</td>
      </tr>
      <tr>
        <td>#PO-9099</td>
        <td class="text-truncate" style="max-width:12rem">The new sustainable materials connects you focused on what matters without the usual hassle.</td>
        <td class="text-end">$211.88</td>
      </tr>
      <tr>
        <td>#INV-8764</td>
        <td class="text-truncate" style="max-width:12rem">This clear launch turns data easy to understand with friendly support.</td>
        <td class="text-end">$371.87</td>
      </tr>
    </tbody>
  </table>
</div>

5Long file names

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

6-lessons-from-our-community-final-version-5.docx379 KB
how-we-rebuilt-our-process-final-version-7.docx856 KB
inside-the-practical-team-final-version-2.docx467 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">6-lessons-from-our-community-final-version-5.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">379 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">how-we-rebuilt-our-process-final-version-7.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">856 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">inside-the-practical-team-final-version-2.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">467 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="#">Accessories</a></li>
    <li class="breadcrumb-item active text-truncate" aria-current="page">The new sustainable materials gives time back in your day all year round.</li>
  </ol>
</nav>

7Notification preview

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

Hana Larsen replied: This smart experience brings the whole team on the same page all year round.6 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">Hana Larsen replied: This smart experience brings the whole team on the same page all year round.</strong><small class="text-body-secondary">6 days ago</small>
  </div>
</div>

8Equal card titles

Truncated titles keep a grid of cards the same height.

3 lessons from our plan: A friendly goal helps decisions quicker and clearer from the very first day.

Nov 22, 2025

A guide to secure checkout: Our 30-day returns helps you focused on what matters without the usual hassle.

Dec 3, 2025

7 lessons from our process: The new secure payments keeps every detail in view with friendly support.

Dec 9, 2025

<div class="row g-3">
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 text-truncate">3 lessons from our plan: A friendly goal helps decisions quicker and clearer from the very first day.</h3>
        <p class="small text-body-secondary mb-0">Nov 22, 2025</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 text-truncate">A guide to secure checkout: Our 30-day returns helps you focused on what matters without the usual hassle.</h3>
        <p class="small text-body-secondary mb-0">Dec 3, 2025</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 text-truncate">7 lessons from our process: The new secure payments keeps every detail in view with friendly support.</h3>
        <p class="small text-body-secondary mb-0">Dec 9, 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.

Elena Moreau14:30

Our free shipping lets you focused on what matters for teams of every size. Our secure checkout connects results you can measure in just a few clicks.

Isla Nguyen08:00

This honest routine connects time back in your day without the usual hassle. A modern workflow keeps results you can measure in just a few clicks.

Jonah Carter07:30

A friendly process shows decisions quicker and clearer with friendly support. Our loyalty rewards makes you focused on what matters for teams of every size.

<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">Elena Moreau</strong><small class="ms-auto ps-2 text-body-secondary">14:30</small>
    </div>
    <div class="small text-body-secondary text-truncate">
      Our free shipping lets you focused on what matters for teams of every size. Our secure checkout connects results you can measure in just a few clicks.
    </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">Isla Nguyen</strong><small class="ms-auto ps-2 text-body-secondary">08:00</small>
    </div>
    <div class="small text-body-secondary text-truncate">
      This honest routine connects time back in your day without the usual hassle. A modern workflow keeps results you can measure in just a few clicks.
    </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">Jonah Carter</strong><small class="ms-auto ps-2 text-body-secondary">07:30</small>
    </div>
    <div class="small text-body-secondary text-truncate">
      A friendly process shows decisions quicker and clearer with friendly support. Our loyalty rewards makes you focused on what matters for teams of every size.
    </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/tips/getting-started-with-the-new-dashboard">example.com/community/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.

Glass bottle Accessories edition

$424.00

Canvas tote Outdoor edition

$300.50

Ceramic mug Outdoor edition

$465.50

Leather wallet Outdoor edition

$177.00

<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">
        Glass bottle Accessories edition
      </div>
      <strong class="small">$424.00</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">
        Canvas tote Outdoor edition
      </div>
      <strong class="small">$300.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">
        Ceramic mug Outdoor edition
      </div>
      <strong class="small">$465.50</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">
        Leather wallet Outdoor edition
      </div>
      <strong class="small">$177.00</strong>
    </div>
  </div>
</div>

12Truncated chips

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

The honest community checklistHonest ways to improve your launchHow we rebuilt our process3 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">The honest community checklist</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">Honest ways to improve your launch</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">How we rebuilt our process</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">3 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 9</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-8.svg" alt="" width="24" height="24" class="rounded-circle"><span class="text-truncate">Kai Brennan (Backend 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

A focused project shows data easy to understand all year round. A reliable routine makes customers coming back for teams of every size.

New

With min-width: 0

A modern journey connects your work organised wherever you are. The new carbon-neutral delivery gives results you can measure wherever you are.

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">
          A focused project shows data easy to understand all year round. A reliable routine makes customers coming back for teams of every size.
        </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">
          A modern journey connects your work organised wherever you are. The new carbon-neutral delivery gives results you can measure wherever you are.
        </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">30-day returns Powerful update 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-fill" aria-hidden="true"></i><span class="text-truncate">Free shipping Reliable team 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">Secure checkout Honest idea modern</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">Gift wrapping Calm story simple</span></a></li>
  </ul>
</nav>

16Kanban card titles

Narrow board columns keep task titles tidy with truncation.

To do

A guide to secure checkout

A guide to free shipping

Doing

A guide to free shipping

Practical ways to improve your story

Done

Powerful ways to improve your workflow

6 lessons from our plan

<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">
        A guide to secure checkout
      </div>
      <div class="bg-body border rounded p-2 mt-2 small text-truncate">
        A guide to free shipping
      </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">
        A guide to free shipping
      </div>
      <div class="bg-body border rounded p-2 mt-2 small text-truncate">
        Practical ways to improve your story
      </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">
        Powerful ways to improve your workflow
      </div>
      <div class="bg-body border rounded p-2 mt-2 small text-truncate">
        6 lessons from our plan
      </div>
    </div>
  </div>
</div>

17Order summary address

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

Jonah Silva, 121 Hillcrest Road, Montreal 58594, Denmark 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">Jonah Silva, 121 Hillcrest Road, Montreal 58594, Denmark</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">Free shipping for shoppers</span> </button>
  <ul class="dropdown-menu" aria-labelledby="hp-dd-1242">
    <li><a class="dropdown-item" href="#">Live order tracking</a></li>
    <li><a class="dropdown-item" href="#">30-day returns</a></li>
  </ul>
</div>

19Playlist

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

Everyday essentials, beautifully made2:52
Shop the collection everyone talks about4:36
Everyday essentials, beautifully made4:15

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex gap-2"><span class="text-truncate">Everyday essentials, beautifully made</span><small class="ms-auto text-body-secondary">2:52</small></li>
  <li class="list-group-item d-flex gap-2"><span class="text-truncate">Shop the collection everyone talks about</span><small class="ms-auto text-body-secondary">4:36</small></li>
  <li class="list-group-item d-flex gap-2"><span class="text-truncate">Everyday essentials, beautifully made</span><small class="ms-auto text-body-secondary">4:15</small></li>
</ol>

20Full text in a tooltip

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

Our loyalty rewards helps new ideas to life in just a few clicks. A fast process makes complex tasks into simple steps with friendly support.

<span class="d-inline-block text-truncate hp-tt" style="max-width:16rem" tabindex="0" data-ui-toggle="tooltip" data-ui-title="Our loyalty rewards helps new ideas to life in just a few clicks. A fast process makes complex tasks into simple steps with friendly support.">Our loyalty rewards helps new ideas to life in just a few clicks. A fast process makes complex tasks into simple steps with friendly support.</span>