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 physiotherapy guides you focused on what matters without the usual hassle. Our health check-ups gives customers coming back all year round.

<p class="truncate hp-tt mb-0" style="max-width:18rem">Our physiotherapy guides you focused on what matters without the usual hassle. Our health check-ups gives customers coming back all year round.</p>

2Inline-block inside a sentence

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

Last edited by Ravi Sato and Theo Duarte 3 min ago.

<p class="mb-0">Last edited by <span class="inline-block truncate align-bottom hp-tt" style="max-width:8rem">Ravi Sato and Theo Duarte</span> 3 min ago.</p>

3Inbox preview

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

Tariq Morgan8 lessons from our workflow – A bright update shows new ideas to life for teams of every size. A smart journey gives complex tasks into simple steps from the very first day.
Theo Patel5 lessons from our project – The new family plans turns the whole team on the same page at a fair price. A simple process connects your work organised with friendly support.
Ethan CarterInside the clear goal – Our lab tests keeps data easy to understand without extra tools. This fast journey connects you focused on what matters with friendly support.

<ul class="list-group">
  <li class="list-group-item flex gap-4"><strong class="shrink-0 small" style="width:7rem">Tariq Morgan</strong><span class="truncate small"><span class="font-semibold">8 lessons from our workflow</span> &ndash; A bright update shows new ideas to life for teams of every size. A smart journey gives complex tasks into simple steps from the very first day.</span></li>
  <li class="list-group-item flex gap-4"><strong class="shrink-0 small" style="width:7rem">Theo Patel</strong><span class="truncate small"><span class="font-semibold">5 lessons from our project</span> &ndash; The new family plans turns the whole team on the same page at a fair price. A simple process connects your work organised with friendly support.</span></li>
  <li class="list-group-item flex gap-4"><strong class="shrink-0 small" style="width:7rem">Ethan Carter</strong><span class="truncate small"><span class="font-semibold">Inside the clear goal</span> &ndash; Our lab tests keeps data easy to understand without extra tools. This fast journey connects you focused on what matters with friendly support.</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-4953	The new same-day appointments turns decisions quicker and clearer without extra tools.	$384.64
#ORD-4104	Our lab tests gives data easy to understand wherever you are.	$398.52
#INV-2659	The new online results brings decisions quicker and clearer without the usual hassle.	$169.95

<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-4953</td>
        <td class="truncate" style="max-width:12rem">The new same-day appointments turns decisions quicker and clearer without extra tools.</td>
        <td class="text-end">$384.64</td>
      </tr>
      <tr>
        <td>#ORD-4104</td>
        <td class="truncate" style="max-width:12rem">Our lab tests gives data easy to understand wherever you are.</td>
        <td class="text-end">$398.52</td>
      </tr>
      <tr>
        <td>#INV-2659</td>
        <td class="truncate" style="max-width:12rem">The new online results brings decisions quicker and clearer without the usual hassle.</td>
        <td class="text-end">$169.95</td>
      </tr>
    </tbody>
  </table>
</div>

5Long file names

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

the-flexible-dashboard-checklist-final-version-6.docx71 KB
a-guide-to-physiotherapy-final-version-4.docx295 KB
a-guide-to-telehealth-final-version-8.docx419 KB

<ul class="list-unstyled vstack gap-2 mb-0" style="max-width:20rem">
  <li class="flex items-center gap-2"><span class="text-primary"><i class="bi bi-file-earmark-text" aria-hidden="true"></i></span><span class="truncate">the-flexible-dashboard-checklist-final-version-6.docx</span><small class="ms-auto text-muted shrink-0">71 KB</small></li>
  <li class="flex items-center gap-2"><span class="text-primary"><i class="bi bi-file-earmark-text" aria-hidden="true"></i></span><span class="truncate">a-guide-to-physiotherapy-final-version-4.docx</span><small class="ms-auto text-muted shrink-0">295 KB</small></li>
  <li class="flex items-center gap-2"><span class="text-primary"><i class="bi bi-file-earmark-text" aria-hidden="true"></i></span><span class="truncate">a-guide-to-telehealth-final-version-8.docx</span><small class="ms-auto text-muted shrink-0">419 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="#">Dermatology</a></li>
    <li class="breadcrumb-item active truncate" aria-current="page">The new reminders keeps time back in your day from the very first day.</li>
  </ol>
</nav>

7Notification preview

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

Elena Patel replied: A flexible story turns customers coming back in just a few clicks.6 min ago

<div class="flex items-center gap-4 border rounded-md p-2" style="max-width:24rem">
  <span class="text-xl text-primary"><i class="bi bi-bell-fill" aria-hidden="true"></i></span> 
  <div class="truncate">
    <strong class="small block truncate">Elena Patel replied: A flexible story turns customers coming back in just a few clicks.</strong><small class="text-muted">6 min ago</small>
  </div>
</div>

8Equal card titles

Truncated titles keep a grid of cards the same height.

9 lessons from our community: Our general practice connects customers coming back all year round.

Dec 8, 2025

4 lessons from our workflow: A honest plan makes results you can measure from the very first day.

Sep 18, 2025

What's new in pediatrics: This honest idea turns you focused on what matters without the usual hassle.

Sep 7, 2026

<div class="row g-3">
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 truncate">9 lessons from our community: Our general practice connects customers coming back all year round.</h3>
        <p class="small text-muted mb-0">Dec 8, 2025</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 truncate">4 lessons from our workflow: A honest plan makes results you can measure from the very first day.</h3>
        <p class="small text-muted mb-0">Sep 18, 2025</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 truncate">What&#39;s new in pediatrics: This honest idea turns you focused on what matters without the usual hassle.</h3>
        <p class="small text-muted mb-0">Sep 7, 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.

Jonah Okafor20:30

Our lab tests gives every detail in view without extra tools. This friendly journey guides the whole team on the same page all year round.

Nora Harlow15:00

A honest story lets new ideas to life for teams of every size. The new family plans brings your work organised wherever you are.

Liam Hughes09:00

A clear process keeps data easy to understand without extra tools. Our physiotherapy gives every detail in view wherever you are.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex gap-2 items-center"><img src="../assets/img/avatar-3.svg" alt="" width="40" height="40" class="rounded-full">
  <div style="min-width:0" class="grow">
    <div class="flex">
      <strong class="small truncate">Jonah Okafor</strong><small class="ms-auto ps-2 text-muted">20:30</small>
    </div>
    <div class="small text-muted truncate">
      Our lab tests gives every detail in view without extra tools. This friendly journey guides the whole team on the same page all year round.
    </div>
  </div>
  </a><a href="#" class="list-group-item list-group-item-action flex gap-2 items-center"><img src="../assets/img/avatar-7.svg" alt="" width="40" height="40" class="rounded-full">
  <div style="min-width:0" class="grow">
    <div class="flex">
      <strong class="small truncate">Nora Harlow</strong><small class="ms-auto ps-2 text-muted">15:00</small>
    </div>
    <div class="small text-muted truncate">
      A honest story lets new ideas to life for teams of every size. The new family plans brings your work organised wherever you are.
    </div>
  </div>
  </a><a href="#" class="list-group-item list-group-item-action flex gap-2 items-center"><img src="../assets/img/avatar-3.svg" alt="" width="40" height="40" class="rounded-full">
  <div style="min-width:0" class="grow">
    <div class="flex">
      <strong class="small truncate">Liam Hughes</strong><small class="ms-auto ps-2 text-muted">09:00</small>
    </div>
    <div class="small text-muted truncate">
      A clear process keeps data easy to understand without extra tools. Our physiotherapy gives every detail in view wherever you are.
    </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="block truncate" title="example.com/plan/insights/getting-started-with-the-new-dashboard">example.com/journey/how-to/getting-started-with-the-new-dashboard</a></li>
  <li><a href="#" class="block 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.

Dental cleaning Orthopedics edition

$251.99

Vaccination Pediatrics edition

$231.50

Annual check-up Dental edition

$64.00

Video consult Dental edition

$303.00

<div class="row g-2">
  <div class="col-6 col-md-3">
    <div class="border rounded-md p-2">
      <img src="../assets/img/product-1.svg" alt="" class="img-fluid rounded-md mb-1">
      <div class="small truncate">
        Dental cleaning Orthopedics edition
      </div>
      <strong class="small">$251.99</strong>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="border rounded-md p-2">
      <img src="../assets/img/product-2.svg" alt="" class="img-fluid rounded-md mb-1">
      <div class="small truncate">
        Vaccination Pediatrics edition
      </div>
      <strong class="small">$231.50</strong>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="border rounded-md p-2">
      <img src="../assets/img/product-3.svg" alt="" class="img-fluid rounded-md mb-1">
      <div class="small truncate">
        Annual check-up Dental edition
      </div>
      <strong class="small">$64.00</strong>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="border rounded-md p-2">
      <img src="../assets/img/product-4.svg" alt="" class="img-fluid rounded-md mb-1">
      <div class="small truncate">
        Video consult Dental edition
      </div>
      <strong class="small">$303.00</strong>
    </div>
  </div>
</div>

12Truncated chips

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

What's new in orthopedicsBright ways to improve your projectA guide to general practiceWhat's new in dental

<div class="flex flex-wrap gap-2">
  <span class="badge rounded-full text-bg-light border inline-block truncate" style="max-width:9rem">What&#39;s new in orthopedics</span><span class="badge rounded-full text-bg-light border inline-block truncate" style="max-width:9rem">Bright ways to improve your project</span><span class="badge rounded-full text-bg-light border inline-block truncate" style="max-width:9rem">A guide to general practice</span><span class="badge rounded-full text-bg-light border inline-block truncate" style="max-width:9rem">What&#39;s new in dental</span>
</div>

13User menu name

A long account name truncates inside the navbar button.

<nav class="navbar bg-surface-3 rounded-md px-4">
  <span class="navbar-brand mb-0 h6">Brand name 15</span> 
  <button type="button" class="btn btn-light btn-sm flex items-center gap-2" style="max-width:12rem"> <img src="../assets/img/avatar-7.svg" alt="" width="24" height="24" class="rounded-full"><span class="truncate">Diego Moreau (HR Partner)</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

The new certified specialists guides results you can measure with friendly support. Our physiotherapy lets time back in your day on any device.

New

With min-width: 0

A honest team gives data easy to understand without extra tools. The new insurance friendly brings new ideas to life with friendly support.

New

<div class="row g-3">
  <div class="col-sm-6">
    <p class="small font-semibold mb-1">Without min-width</p>
    <div class="flex border rounded-md p-2 overflow-hidden">
      <div class="grow">
        <div class="truncate">
          The new certified specialists guides results you can measure with friendly support. Our physiotherapy lets time back in your day 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 font-semibold mb-1">With min-width: 0</p>
    <div class="flex border rounded-md p-2">
      <div class="grow" style="min-width:0">
        <div class="truncate">
          A honest team gives data easy to understand without extra tools. The new insurance friendly brings new ideas to life with friendly support.
        </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-md p-2" style="max-width:14rem" aria-label="Projects">
  <ul class="nav flex-col">
    <li class="nav-item"><a class="nav-link flex gap-2 py-1 px-2" href="#"><i class="bi bi-folder" aria-hidden="true"></i><span class="truncate">Health check-ups Calm routine clear</span></a></li>
    <li class="nav-item"><a class="nav-link flex gap-2 py-1 px-2" href="#"><i class="bi bi-folder" aria-hidden="true"></i><span class="truncate">Dental care Modern release fast</span></a></li>
    <li class="nav-item"><a class="nav-link flex gap-2 py-1 px-2" href="#"><i class="bi bi-folder" aria-hidden="true"></i><span class="truncate">General practice Honest process honest</span></a></li>
    <li class="nav-item"><a class="nav-link flex gap-2 py-1 px-2" href="#"><i class="bi bi-folder" aria-hidden="true"></i><span class="truncate">Lab tests Clear idea focused</span></a></li>
  </ul>
</nav>

16Kanban card titles

Narrow board columns keep task titles tidy with truncation.

To do

Calm ways to improve your workflow

How we rebuilt our idea

Doing

Inside the modern plan

Elegant ways to improve your community

Done

Inside the honest dashboard

What's new in dental

<div class="row g-2">
  <div class="col-4">
    <div class="bg-surface-3 rounded-md p-2">
      <small class="font-semibold">To do</small>
      <div class="bg-page border rounded-md p-2 mt-2 small truncate">
        Calm ways to improve your workflow
      </div>
      <div class="bg-page border rounded-md p-2 mt-2 small truncate">
        How we rebuilt our idea
      </div>
    </div>
  </div>
  <div class="col-4">
    <div class="bg-surface-3 rounded-md p-2">
      <small class="font-semibold">Doing</small>
      <div class="bg-page border rounded-md p-2 mt-2 small truncate">
        Inside the modern plan
      </div>
      <div class="bg-page border rounded-md p-2 mt-2 small truncate">
        Elegant ways to improve your community
      </div>
    </div>
  </div>
  <div class="col-4">
    <div class="bg-surface-3 rounded-md p-2">
      <small class="font-semibold">Done</small>
      <div class="bg-page border rounded-md p-2 mt-2 small truncate">
        Inside the honest dashboard
      </div>
      <div class="bg-page border rounded-md p-2 mt-2 small truncate">
        What&#39;s new in dental
      </div>
    </div>
  </div>
</div>

17Order summary address

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

Omar Brennan, 447 Cedar Lane, Oslo 24734, Czechia Change

<div class="flex items-center gap-2 border rounded-md p-2">
  <span class="text-muted"><i class="bi bi-truck" aria-hidden="true"></i></span> <span class="truncate small">Omar Brennan, 447 Cedar Lane, Oslo 24734, Czechia</span> <a href="#" class="ms-auto small 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 inline-flex items-center" type="button" id="hp-dd-1242" data-ui-toggle="dropdown" aria-expanded="false" style="max-width:14rem"> <span class="truncate">General practice for patients</span> </button>
  <ul class="dropdown-menu" aria-labelledby="hp-dd-1242">
    <li><a class="dropdown-item" href="#">General practice</a></li>
    <li><a class="dropdown-item" href="#">General practice</a></li>
  </ul>
</div>

19Playlist

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

Feel better with expert care2:58
Your health, our priority3:38
Feel better with expert care3:35

<ol class="list-group list-group-numbered">
  <li class="list-group-item flex gap-2"><span class="truncate">Feel better with expert care</span><small class="ms-auto text-muted">2:58</small></li>
  <li class="list-group-item flex gap-2"><span class="truncate">Your health, our priority</span><small class="ms-auto text-muted">3:38</small></li>
  <li class="list-group-item flex gap-2"><span class="truncate">Feel better with expert care</span><small class="ms-auto text-muted">3:35</small></li>
</ol>

20Full text in a tooltip

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

The new same-day appointments makes new ideas to life without extra tools. Our dental care guides time back in your day without extra tools.

<span class="inline-block truncate hp-tt" style="max-width:16rem" tabindex="0" data-ui-toggle="tooltip" data-ui-title="The new same-day appointments makes new ideas to life without extra tools. Our dental care guides time back in your day without extra tools.">The new same-day appointments makes new ideas to life without extra tools. Our dental care guides time back in your day without extra tools.</span>