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 journey keeps every detail in view on any device. A clear release gives results you can measure for teams of every size.

<p class="text-truncate hp-tt mb-0" style="max-width:18rem">This modern journey keeps every detail in view on any device. A clear release gives results you can measure 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 Owen Brennan and Kai Ashford 18 min ago.

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

3Inbox preview

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

Freya TanakaWhat's new in savings – This honest update makes time back in your day without the usual hassle. The new 24/7 support connects decisions quicker and clearer without extra tools.
Theo Morgan4 lessons from our launch – Our payroll guides every detail in view for teams of every size. The new accounting sync makes your work organised on any device.
Freya HaddadA guide to multi-currency wallets – A fast workflow connects results you can measure for teams of every size. This honest plan shows the whole team on the same page wherever you are.

<ul class="list-group">
  <li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Freya Tanaka</strong><span class="text-truncate small"><span class="fw-semibold">What&#39;s new in savings</span> &ndash; This honest update makes time back in your day without the usual hassle. The new 24/7 support connects decisions quicker and clearer without extra tools.</span></li>
  <li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Theo Morgan</strong><span class="text-truncate small"><span class="fw-semibold">4 lessons from our launch</span> &ndash; Our payroll guides every detail in view for teams of every size. The new accounting sync makes your work organised on any device.</span></li>
  <li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Freya Haddad</strong><span class="text-truncate small"><span class="fw-semibold">A guide to multi-currency wallets</span> &ndash; A fast workflow connects results you can measure for teams of every size. This honest plan shows the whole team on the same page wherever you are.</span></li>
</ul>

4Table cell notes

A long note column truncated with text-truncate and a max width on the cell.

Order	Note	Total
#ORD-8267	A powerful community helps data easy to understand all year round.	$75.41
#PO-8988	A focused routine brings data easy to understand without the usual hassle.	$286.21
#ORD-4534	Our payroll brings results you can measure wherever you are.	$380.48

<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>#ORD-8267</td>
        <td class="text-truncate" style="max-width:12rem">A powerful community helps data easy to understand all year round.</td>
        <td class="text-end">$75.41</td>
      </tr>
      <tr>
        <td>#PO-8988</td>
        <td class="text-truncate" style="max-width:12rem">A focused routine brings data easy to understand without the usual hassle.</td>
        <td class="text-end">$286.21</td>
      </tr>
      <tr>
        <td>#ORD-4534</td>
        <td class="text-truncate" style="max-width:12rem">Our payroll brings results you can measure wherever you are.</td>
        <td class="text-end">$380.48</td>
      </tr>
    </tbody>
  </table>
</div>

5Long file names

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

calm-ways-to-improve-your-team-final-version-7.docx782 KB
what's-new-in-payments-final-version-6.docx891 KB
the-reliable-release-checklist-final-version-7.docx715 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">calm-ways-to-improve-your-team-final-version-7.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">782 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">what&#39;s-new-in-payments-final-version-6.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">891 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-reliable-release-checklist-final-version-7.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">715 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="#">Payments</a></li>
    <li class="breadcrumb-item active text-truncate" aria-current="page">A elegant routine shows decisions quicker and clearer wherever you are.</li>
  </ol>
</nav>

7Notification preview

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

Ruby Moreau replied: This elegant journey lets decisions quicker and clearer from the very first day.46 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">Ruby Moreau replied: This elegant journey lets decisions quicker and clearer from the very first day.</strong><small class="text-body-secondary">46 min ago</small>
  </div>
</div>

8Equal card titles

Truncated titles keep a grid of cards the same height.

4 lessons from our idea: This fast plan guides the whole team on the same page for teams of every size.

Mar 21, 2026

Inside the honest team: Our payroll gives projects moving forward all year round.

Jun 27, 2026

A guide to business accounts: This calm journey connects projects moving forward all year round.

Oct 12, 2026

<div class="row g-3">
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 text-truncate">4 lessons from our idea: This fast plan guides the whole team on the same page for teams of every size.</h3>
        <p class="small text-body-secondary mb-0">Mar 21, 2026</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 text-truncate">Inside the honest team: Our payroll gives projects moving forward all year round.</h3>
        <p class="small text-body-secondary mb-0">Jun 27, 2026</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 text-truncate">A guide to business accounts: This calm journey connects projects moving forward all year round.</h3>
        <p class="small text-body-secondary mb-0">Oct 12, 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.

Noah Hughes08:00

This honest process guides customers coming back with friendly support. This smart journey makes complex tasks into simple steps wherever you are.

Amara Lindqvist15:00

Our business accounts turns customers coming back from the very first day. The new no hidden fees lets time back in your day wherever you are.

Theo Carter20:30

A powerful goal makes results you can measure from the very first day. A secure goal gives your work organised 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-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 Hughes</strong><small class="ms-auto ps-2 text-body-secondary">08:00</small>
    </div>
    <div class="small text-body-secondary text-truncate">
      This honest process guides customers coming back with friendly support. This smart journey makes complex tasks into simple steps 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-8.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">Amara Lindqvist</strong><small class="ms-auto ps-2 text-body-secondary">15:00</small>
    </div>
    <div class="small text-body-secondary text-truncate">
      Our business accounts turns customers coming back from the very first day. The new no hidden fees lets time back in your day 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-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">Theo Carter</strong><small class="ms-auto ps-2 text-body-secondary">20:30</small>
    </div>
    <div class="small text-body-secondary text-truncate">
      A powerful goal makes results you can measure from the very first day. A secure goal gives your work organised 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/project/tutorial/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.

Pro account Payroll edition

$96.50

Savings vault Invoices edition

$473.00

Basic account Invoices edition

$71.99

FX transfer Cards edition

$349.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">
        Pro account Payroll edition
      </div>
      <strong class="small">$96.50</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">
        Savings vault Invoices edition
      </div>
      <strong class="small">$473.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 Invoices edition
      </div>
      <strong class="small">$71.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">
        FX transfer Cards edition
      </div>
      <strong class="small">$349.50</strong>
    </div>
  </div>
</div>

12Truncated chips

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

Inside the fast goalBright ways to improve your storyThe focused goal checklistA guide to business accounts

<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">Inside the fast goal</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">Bright ways to improve your story</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">The focused goal checklist</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">A guide to business accounts</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 2</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-4.svg" alt="" width="24" height="24" class="rounded-circle"><span class="text-truncate">Owen Morgan (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

This flexible process keeps customers coming back for teams of every size. A practical team makes results you can measure without extra tools.

New

With min-width: 0

A friendly team keeps customers coming back from the very first day. This practical update guides data easy to understand at a fair price.

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">
          This flexible process keeps customers coming back for teams of every size. A practical team makes results you can measure without extra tools.
        </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 friendly team keeps customers coming back from the very first day. This practical update guides data easy to understand at a fair price.
        </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">Corporate cards Clear process friendly</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">Expense tracking Practical experience calm</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 Powerful journey calm</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 Secure goal clear</span></a></li>
  </ul>
</nav>

16Kanban card titles

Narrow board columns keep task titles tidy with truncation.

To do

How we rebuilt our plan

A guide to payroll

Doing

How we rebuilt our story

The reliable process checklist

Done

How we rebuilt our idea

A guide to invoicing

<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 we rebuilt our plan
      </div>
      <div class="bg-body border rounded p-2 mt-2 small text-truncate">
        A guide to payroll
      </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">
        How we rebuilt our story
      </div>
      <div class="bg-body border rounded p-2 mt-2 small text-truncate">
        The reliable process 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">
        How we rebuilt our idea
      </div>
      <div class="bg-body border rounded p-2 mt-2 small text-truncate">
        A guide to invoicing
      </div>
    </div>
  </div>
</div>

17Order summary address

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

Ruby Varga, 131 Market Square, Austin 98003, 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">Ruby Varga, 131 Market Square, Austin 98003, 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">Invoicing for members</span> </button>
  <ul class="dropdown-menu" aria-labelledby="hp-dd-1242">
    <li><a class="dropdown-item" href="#">Expense tracking</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.

Money management made simple3:28
Take control of your cash flow2:03
Money management made simple2:39

<ol class="list-group list-group-numbered">
  <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">3:28</small></li>
  <li class="list-group-item d-flex gap-2"><span class="text-truncate">Take control of your cash flow</span><small class="ms-auto text-body-secondary">2:03</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:39</small></li>
</ol>

20Full text in a tooltip

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

Our payroll gives decisions quicker and clearer for teams of every size. A clear release turns your work organised for teams of every size.

<span class="d-inline-block text-truncate hp-tt" style="max-width:16rem" tabindex="0" data-ui-toggle="tooltip" data-ui-title="Our payroll gives decisions quicker and clearer for teams of every size. A clear release turns your work organised for teams of every size.">Our payroll gives decisions quicker and clearer for teams of every size. A clear release turns your work organised for teams of every size.</span>