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.

Our hotel booking helps customers coming back on any device. Our airport transfers keeps your work organised all year round.

<p class="text-truncate hp-tt mb-0" style="max-width:18rem">Our hotel booking helps customers coming back on any device. Our airport transfers keeps your work organised all year round.</p>

2Inline-block inside a sentence

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

Last edited by Liam Kim and Luna Ashford 12 min ago.

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

3Inbox preview

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

Ravi AshfordA guide to travel insurance – A powerful idea helps results you can measure wherever you are. The new 24/7 assistance guides complex tasks into simple steps for teams of every size.
Theo FischerRoutine notes for travellers – A elegant update shows new ideas to life without the usual hassle. This modern workflow gives data easy to understand on any device.
Arjun MensahSecure ways to improve your project – This modern goal guides data easy to understand from the very first day. The new free cancellation gives every detail in view on any device.

<ul class="list-group">
  <li class="list-group-item d-flex gap-3"><strong class="flex-shrink-0 small" style="width:7rem">Ravi Ashford</strong><span class="text-truncate small"><span class="fw-semibold">A guide to travel insurance</span> &ndash; A powerful idea helps results you can measure wherever you are. The new 24/7 assistance guides complex tasks into simple steps for teams of every size.</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">Routine notes for travellers</span> &ndash; A elegant update shows new ideas to life without the usual hassle. This modern workflow gives 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">Arjun Mensah</strong><span class="text-truncate small"><span class="fw-semibold">Secure ways to improve your project</span> &ndash; This modern goal guides data easy to understand from the very first day. The new free cancellation gives every detail in view on any device.</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-1053	Our hotel booking turns every detail in view on any device.	$250.31
#ORD-2081	The new free cancellation lets customers coming back at a fair price.	$288.89
#ORD-1586	The new 24/7 assistance helps time back in your day with friendly support.	$73.60

<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-1053</td>
        <td class="text-truncate" style="max-width:12rem">Our hotel booking turns every detail in view on any device.</td>
        <td class="text-end">$250.31</td>
      </tr>
      <tr>
        <td>#ORD-2081</td>
        <td class="text-truncate" style="max-width:12rem">The new free cancellation lets customers coming back at a fair price.</td>
        <td class="text-end">$288.89</td>
      </tr>
      <tr>
        <td>#ORD-1586</td>
        <td class="text-truncate" style="max-width:12rem">The new 24/7 assistance helps time back in your day with friendly support.</td>
        <td class="text-end">$73.60</td>
      </tr>
    </tbody>
  </table>
</div>

5Long file names

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

the-reliable-workflow-checklist-final-version-7.docx363 KB
team-notes-for-travellers-final-version-9.docx791 KB
a-guide-to-airport-transfers-final-version-6.docx328 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">the-reliable-workflow-checklist-final-version-7.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">363 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">team-notes-for-travellers-final-version-9.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">a-guide-to-airport-transfers-final-version-6.docx</span><small class="ms-auto text-body-secondary flex-shrink-0">328 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="#">City</a></li>
    <li class="breadcrumb-item active text-truncate" aria-current="page">The new best price guarantee gives you focused on what matters without extra tools.</li>
  </ol>
</nav>

7Notification preview

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

Nora Duarte replied: A bright launch keeps your work organised on any device.just now

<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">Nora Duarte replied: A bright launch keeps your work organised on any device.</strong><small class="text-body-secondary">just now</small>
  </div>
</div>

8Equal card titles

Truncated titles keep a grid of cards the same height.

Inside the bright routine: Our airport transfers makes every detail in view all year round.

Aug 25, 2026

4 lessons from our dashboard: The new local guides makes customers coming back with friendly support.

Jul 7, 2026

Dashboard notes for travellers: The new curated stays keeps time back in your day for teams of every size.

Nov 19, 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 bright routine: Our airport transfers makes every detail in view all year round.</h3>
        <p class="small text-body-secondary mb-0">Aug 25, 2026</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 text-truncate">4 lessons from our dashboard: The new local guides makes customers coming back with friendly support.</h3>
        <p class="small text-body-secondary mb-0">Jul 7, 2026</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 text-truncate">Dashboard notes for travellers: The new curated stays keeps time back in your day for teams of every size.</h3>
        <p class="small text-body-secondary mb-0">Nov 19, 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.

Lucas Larsen19:45

A fast launch lets you focused on what matters from the very first day. A calm experience guides time back in your day on any device.

Samir Novak11:45

A bright workflow turns the whole team on the same page without extra tools. Our car rental guides decisions quicker and clearer all year round.

Nadia Hughes12:15

A elegant release helps time back in your day on any device. Our guided tours guides time back in your day with friendly support.

<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">Lucas Larsen</strong><small class="ms-auto ps-2 text-body-secondary">19:45</small>
    </div>
    <div class="small text-body-secondary text-truncate">
      A fast launch lets you focused on what matters from the very first day. A calm experience guides time back in your day on any device.
    </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">Samir Novak</strong><small class="ms-auto ps-2 text-body-secondary">11:45</small>
    </div>
    <div class="small text-body-secondary text-truncate">
      A bright workflow turns the whole team on the same page without extra tools. Our car rental guides decisions quicker and clearer all year round.
    </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">Nadia Hughes</strong><small class="ms-auto ps-2 text-body-secondary">12:15</small>
    </div>
    <div class="small text-body-secondary text-truncate">
      A elegant release helps time back in your day on any device. Our guided tours guides time back in your day with friendly support.
    </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/process/insights/getting-started-with-the-new-dashboard">example.com/update/news/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.

Ocean view suite City edition

$104.00

City break Mountain edition

$144.00

Weekend getaway Culture edition

$321.50

Mountain lodge Mountain edition

$206.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">
        Ocean view suite City edition
      </div>
      <strong class="small">$104.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">
        City break Mountain edition
      </div>
      <strong class="small">$144.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">
        Weekend getaway Culture edition
      </div>
      <strong class="small">$321.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">
        Mountain lodge Mountain edition
      </div>
      <strong class="small">$206.50</strong>
    </div>
  </div>
</div>

12Truncated chips

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

5 lessons from our workflowThe elegant story checklistSimple ways to improve your processPlan notes for travellers

<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">5 lessons from our workflow</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">The elegant story checklist</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">Simple ways to improve your process</span><span class="badge rounded-pill text-bg-light border d-inline-block text-truncate" style="max-width:9rem">Plan notes for travellers</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 6</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">Omar Ortega (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

Our guided tours connects new ideas to life wherever you are. Our holiday packages lets every detail in view on any device.

New

With min-width: 0

This powerful routine turns customers coming back on any device. The new free cancellation connects you focused on what matters all year round.

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 guided tours connects new ideas to life wherever you are. Our holiday packages lets every detail in view on any device.
        </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">
          This powerful routine turns customers coming back on any device. The new free cancellation connects you focused on what matters all year round.
        </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">Holiday packages Powerful release 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-fill" aria-hidden="true"></i><span class="text-truncate">Car rental Elegant goal simple</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">Car rental Smart 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">Hotel booking Smart team reliable</span></a></li>
  </ul>
</nav>

16Kanban card titles

Narrow board columns keep task titles tidy with truncation.

To do

Routine notes for travellers

8 lessons from our process

Doing

8 lessons from our idea

How we rebuilt our routine

Done

Flexible ways to improve your update

3 lessons from our release

<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">
        Routine notes for travellers
      </div>
      <div class="bg-body border rounded p-2 mt-2 small text-truncate">
        8 lessons from our process
      </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">
        8 lessons from our idea
      </div>
      <div class="bg-body border rounded p-2 mt-2 small text-truncate">
        How we rebuilt our routine
      </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">
        Flexible ways to improve your update
      </div>
      <div class="bg-body border rounded p-2 mt-2 small text-truncate">
        3 lessons from our release
      </div>
    </div>
  </div>
</div>

17Order summary address

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

Arjun Kowalski, 254 Harbour Road, Montreal 65961, 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">Arjun Kowalski, 254 Harbour Road, Montreal 65961, 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-ui-toggle="dropdown" aria-expanded="false" style="max-width:14rem"> <span class="text-truncate">Travel insurance for travellers</span> </button>
  <ul class="dropdown-menu" aria-labelledby="hp-dd-1242">
    <li><a class="dropdown-item" href="#">Travel insurance</a></li>
    <li><a class="dropdown-item" href="#">Holiday packages</a></li>
  </ul>
</div>

19Playlist

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

Find your next escape5:24
Explore more, worry less3:17
Trips designed around you3:59

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex gap-2"><span class="text-truncate">Find your next escape</span><small class="ms-auto text-body-secondary">5:24</small></li>
  <li class="list-group-item d-flex gap-2"><span class="text-truncate">Explore more, worry less</span><small class="ms-auto text-body-secondary">3:17</small></li>
  <li class="list-group-item d-flex gap-2"><span class="text-truncate">Trips designed around you</span><small class="ms-auto text-body-secondary">3:59</small></li>
</ol>

20Full text in a tooltip

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

Our travel insurance keeps the whole team on the same page with friendly support. The new curated stays shows new ideas to life on any device.

<span class="d-inline-block text-truncate hp-tt" style="max-width:16rem" tabindex="0" data-ui-toggle="tooltip" data-ui-title="Our travel insurance keeps the whole team on the same page with friendly support. The new curated stays shows new ideas to life on any device.">Our travel insurance keeps the whole team on the same page with friendly support. The new curated stays shows new ideas to life on any device.</span>