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.

This modern routine brings the whole team on the same page without the usual hassle. A fast journey guides new ideas to life for teams of every size.

<p class="text-truncate hp-tt mb-0" style="max-width:18rem">This modern routine brings the whole team on the same page without the usual hassle. A fast journey guides new ideas to life for teams of every size.</p>

2Inline-block inside a sentence

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

Last edited by Leo Mensah and Mia Harlow just now.

<p class="mb-0">Last edited by <span class="d-inline-block text-truncate align-bottom hp-tt" style="max-width:8rem">Leo Mensah and Mia Harlow</span> just now.</p>

3Inbox preview

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

Kai QuinnSmart ways to improve your journey – The new spending limits helps data easy to understand from the very first day. Our business accounts lets data easy to understand on any device.
Mia QuinnA guide to payroll – A secure idea helps the whole team on the same page in just a few clicks. The new spending limits makes complex tasks into simple steps without extra tools.
Ravi CarterA guide to business accounts – Our payroll keeps new ideas to life without extra tools. Our expense tracking connects projects moving forward 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">Kai Quinn</strong><span class="text-truncate small"><span class="fw-semibold">Smart ways to improve your journey</span> &ndash; The new spending limits helps data easy to understand from the very first day. Our business accounts lets data easy to understand on any device.</span></li>
  <li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Mia Quinn</strong><span class="text-truncate small"><span class="fw-semibold">A guide to payroll</span> &ndash; A secure idea helps the whole team on the same page in just a few clicks. The new spending limits makes complex tasks into simple steps without extra tools.</span></li>
  <li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Ravi Carter</strong><span class="text-truncate small"><span class="fw-semibold">A guide to business accounts</span> &ndash; Our payroll keeps new ideas to life without extra tools. Our expense tracking connects projects moving forward 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
#TX-9726	The new accounting sync keeps your work organised at a fair price.	$325.35
#TX-6562	The new accounting sync connects new ideas to life in just a few clicks.	$61.35
#TX-5860	This friendly experience lets data easy to understand without extra tools.	$339.29

<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-9726</td>
        <td class="text-truncate" style="max-width:12rem">The new accounting sync keeps your work organised at a fair price.</td>
        <td class="text-end">$325.35</td>
      </tr>
      <tr>
        <td>#TX-6562</td>
        <td class="text-truncate" style="max-width:12rem">The new accounting sync connects new ideas to life in just a few clicks.</td>
        <td class="text-end">$61.35</td>
      </tr>
      <tr>
        <td>#TX-5860</td>
        <td class="text-truncate" style="max-width:12rem">This friendly experience lets data easy to understand without extra tools.</td>
        <td class="text-end">$339.29</td>
      </tr>
    </tbody>
  </table>
</div>

5Long file names

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

what's-new-in-invoices-final-version-7.docx142 KB
the-powerful-idea-checklist-final-version-7.docx820 KB
a-guide-to-payroll-final-version-5.docx305 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">what&#39;s-new-in-invoices-final-version-7.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">142 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-powerful-idea-checklist-final-version-7.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">820 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">a-guide-to-payroll-final-version-5.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">305 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="#">Payroll</a></li>
    <li class="breadcrumb-item active text-truncate" aria-current="page">This calm dashboard helps every detail in view without the usual hassle.</li>
  </ol>
</nav>

7Notification preview

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

Mia Kowalski replied: The new bank-grade encryption turns new ideas to life on any device.yesterday

<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">Mia Kowalski replied: The new bank-grade encryption turns new ideas to life on any device.</strong><small class="text-body-secondary">yesterday</small>
  </div>
</div>

8Equal card titles

Truncated titles keep a grid of cards the same height.

Inside the reliable project: This powerful story lets new ideas to life with friendly support.

Feb 27, 2026

The bright team checklist: This smart story guides decisions quicker and clearer without the usual hassle.

Apr 30, 2026

Inside the reliable launch: A honest process makes your work organised with friendly support.

Dec 21, 2025

<div class="row g-3">
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 text-truncate">Inside the reliable project: This powerful story lets new ideas to life with friendly support.</h3>
        <p class="small text-body-secondary mb-0">Feb 27, 2026</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 text-truncate">The bright team checklist: This smart story guides decisions quicker and clearer without the usual hassle.</h3>
        <p class="small text-body-secondary mb-0">Apr 30, 2026</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 text-truncate">Inside the reliable launch: A honest process makes your work organised with friendly support.</h3>
        <p class="small text-body-secondary mb-0">Dec 21, 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 Larsen17:30

This practical routine makes the whole team on the same page for teams of every size. The new 24/7 support shows projects moving forward from the very first day.

Ruby Kim19:30

A honest story keeps data easy to understand without the usual hassle. A reliable experience makes customers coming back wherever you are.

Noah Kim19:00

This secure workflow shows the whole team on the same page at a fair price. This friendly community connects the whole team on the same page 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-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">Noah Larsen</strong><small class="ms-auto ps-2 text-body-secondary">17:30</small>
    </div>
    <div class="small text-body-secondary text-truncate">
      This practical routine makes the whole team on the same page for teams of every size. The new 24/7 support shows projects moving forward from the very first 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-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">Ruby Kim</strong><small class="ms-auto ps-2 text-body-secondary">19:30</small>
    </div>
    <div class="small text-body-secondary text-truncate">
      A honest story keeps data easy to understand without the usual hassle. A reliable experience makes customers coming back wherever you are.
    </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">Noah Kim</strong><small class="ms-auto ps-2 text-body-secondary">19:00</small>
    </div>
    <div class="small text-body-secondary text-truncate">
      This secure workflow shows the whole team on the same page at a fair price. This friendly community connects the whole team on the same page 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/update/insights/getting-started-with-the-new-dashboard">example.com/team/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.

Payroll module Payroll edition

$12.99

FX transfer Payroll edition

$33.00

Basic account Savings edition

$204.99

Pro account Payroll edition

$11.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">
        Payroll module Payroll edition
      </div>
      <strong class="small">$12.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">
        FX transfer Payroll edition
      </div>
      <strong class="small">$33.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">
        Basic account Savings edition
      </div>
      <strong class="small">$204.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">
        Pro account Payroll edition
      </div>
      <strong class="small">$11.50</strong>
    </div>
  </div>
</div>

12Truncated chips

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

Clear ways to improve your experienceReliable ways to improve your processSimple ways to improve your launchExperience notes for members

<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">Clear ways to improve your experience</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">Reliable ways to improve your process</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">Simple ways to improve your launch</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">Experience notes for members</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 13</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-11.svg" alt="" width="24" height="24" class="rounded-circle"><span class="text-truncate">Sofia Ortega (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

Our corporate cards helps time back in your day for teams of every size. Our corporate cards gives projects moving forward all year round.

New

With min-width: 0

A secure process brings every detail in view without extra tools. Our corporate cards brings new ideas to life in just a few clicks.

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">
          Our corporate cards helps time back in your day for teams of every size. Our corporate cards gives projects moving forward all year round.
        </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 secure process brings every detail in view without extra tools. Our corporate cards brings new ideas to life in just a few clicks.
        </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">Expense tracking Focused plan 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" aria-hidden="true"></i><span class="text-truncate">Business accounts Simple update 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" aria-hidden="true"></i><span class="text-truncate">Multi-currency wallets Fast process 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" aria-hidden="true"></i><span class="text-truncate">Corporate cards Bright story clear</span></a></li>
  </ul>
</nav>

16Kanban card titles

Narrow board columns keep task titles tidy with truncation.

To do

Goal notes for members

How we rebuilt our idea

Doing

9 lessons from our launch

The clear dashboard checklist

Done

7 lessons from our goal

The focused experience checklist

<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">
        Goal notes for members
      </div>
      <div class="bg-body border rounded p-2 mt-2 small text-truncate">
        How we rebuilt our idea
      </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">
        9 lessons from our launch
      </div>
      <div class="bg-body border rounded p-2 mt-2 small text-truncate">
        The clear dashboard checklist
      </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">
        7 lessons from our goal
      </div>
      <div class="bg-body border rounded p-2 mt-2 small text-truncate">
        The focused experience checklist
      </div>
    </div>
  </div>
</div>

17Order summary address

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

Ruby Larsen, 348 Harbour Road, Edinburgh 80996, Singapore 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">Ruby Larsen, 348 Harbour Road, Edinburgh 80996, Singapore</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">Corporate cards for members</span> </button>
  <ul class="dropdown-menu" aria-labelledby="hp-dd-1242">
    <li><a class="dropdown-item" href="#">Multi-currency wallets</a></li>
    <li><a class="dropdown-item" href="#">Payroll</a></li>
  </ul>
</div>

19Playlist

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

See every transaction in real time2:33
See every transaction in real time3:09
Money management made simple2:04

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex gap-2"><span class="text-truncate">See every transaction in real time</span><small class="ms-auto text-body-secondary">2:33</small></li>
  <li class="list-group-item d-flex gap-2"><span class="text-truncate">See every transaction in real time</span><small class="ms-auto text-body-secondary">3:09</small></li>
  <li class="list-group-item d-flex gap-2"><span class="text-truncate">Money management made simple</span><small class="ms-auto text-body-secondary">2:04</small></li>
</ol>

20Full text in a tooltip

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

Our business accounts shows customers coming back all year round. The new no hidden fees helps projects moving forward at a fair price.

<span class="d-inline-block text-truncate hp-tt" style="max-width:16rem" tabindex="0" data-ui-toggle="tooltip" data-ui-title="Our business accounts shows customers coming back all year round. The new no hidden fees helps projects moving forward at a fair price.">Our business accounts shows customers coming back all year round. The new no hidden fees helps projects moving forward at a fair price.</span>