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 team has done this many times, so you never have to guess. We measure success in sign-ups, sales and brand recall, not just awards.

<p class="truncate hp-tt mb-0" style="max-width:18rem">Our team has done this many times, so you never have to guess. We measure success in sign-ups, sales and brand recall, not just awards.</p>

2Inline-block inside a sentence

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

Last edited by Lucas Larsen and Ruby Nguyen 17 hours ago.

<p class="mb-0">Last edited by <span class="inline-block truncate align-bottom hp-tt" style="max-width:8rem">Lucas Larsen and Ruby Nguyen</span> 17 hours ago.</p>

3Inbox preview

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

Zoe BrennanA checklist for your next website launch – Clear prices, honest advice and no surprises along the way. Senior designers lead every project from the first sketch to the final file.
Felix AshfordFive website mistakes that cost you leads – Friendly people answer your questions quickly, by phone, chat or email. We combine strategy, design and technology to build brands that grow.
Lea AlvarezOur favourite tips for busy weeks – We keep things simple, so you can focus on what matters to you. Websites we build are fast, accessible and easy for your team to update.

<ul class="list-group">
  <li class="list-group-item flex gap-4"><strong class="shrink-0 small" style="width:7rem">Zoe Brennan</strong><span class="truncate small"><span class="font-semibold">A checklist for your next website launch</span> &ndash; Clear prices, honest advice and no surprises along the way. Senior designers lead every project from the first sketch to the final file.</span></li>
  <li class="list-group-item flex gap-4"><strong class="shrink-0 small" style="width:7rem">Felix Ashford</strong><span class="truncate small"><span class="font-semibold">Five website mistakes that cost you leads</span> &ndash; Friendly people answer your questions quickly, by phone, chat or email. We combine strategy, design and technology to build brands that grow.</span></li>
  <li class="list-group-item flex gap-4"><strong class="shrink-0 small" style="width:7rem">Lea Alvarez</strong><span class="truncate small"><span class="font-semibold">Our favourite tips for busy weeks</span> &ndash; We keep things simple, so you can focus on what matters to you. Websites we build are fast, accessible and easy for your team to update.</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-8617	Fixed prices and weekly demos keep you in control from start to finish.	$272.47
#PO-8173	Small teams, short feedback loops and no handoffs lost in translation.	$205.94
#ORD-8755	Clients stay with us for years because we treat their brand like our own.	$303.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>#ORD-8617</td>
        <td class="truncate" style="max-width:12rem">Fixed prices and weekly demos keep you in control from start to finish.</td>
        <td class="text-end">$272.47</td>
      </tr>
      <tr>
        <td>#PO-8173</td>
        <td class="truncate" style="max-width:12rem">Small teams, short feedback loops and no handoffs lost in translation.</td>
        <td class="text-end">$205.94</td>
      </tr>
      <tr>
        <td>#ORD-8755</td>
        <td class="truncate" style="max-width:12rem">Clients stay with us for years because we treat their brand like our own.</td>
        <td class="text-end">$303.87</td>
      </tr>
    </tbody>
  </table>
</div>

5Long file names

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

how-to-choose-the-right-project-final-version-2.docx822 KB
lessons-from-a-year-of-client-workshops-final-version-5.docx282 KB
a-beginner's-guide-to-getting-started-final-version-4.docx891 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-ink"><i class="bi bi-file-earmark-text-fill" aria-hidden="true"></i></span><span class="truncate">how-to-choose-the-right-project-final-version-2.docx</span><small class="ms-auto text-muted shrink-0">822 KB</small></li>
  <li class="flex items-center gap-2"><span class="text-primary-ink"><i class="bi bi-file-earmark-text-fill" aria-hidden="true"></i></span><span class="truncate">lessons-from-a-year-of-client-workshops-final-version-5.docx</span><small class="ms-auto text-muted shrink-0">282 KB</small></li>
  <li class="flex items-center gap-2"><span class="text-primary-ink"><i class="bi bi-file-earmark-text-fill" aria-hidden="true"></i></span><span class="truncate">a-beginner&#39;s-guide-to-getting-started-final-version-4.docx</span><small class="ms-auto text-muted shrink-0">891 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="#">Social</a></li>
    <li class="breadcrumb-item active truncate" aria-current="page">Our motion team turns complex ideas into short films people actually watch.</li>
  </ol>
</nav>

7Notification preview

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

Owen Morgan replied: We have helped more than a hundred companies launch, rebrand and grow online.22 hours ago

<div class="flex items-center gap-4 border rounded-md p-2" style="max-width:24rem">
  <span class="text-xl text-primary-ink"><i class="bi bi-bell-fill" aria-hidden="true"></i></span> 
  <div class="truncate">
    <strong class="small block truncate">Owen Morgan replied: We have helped more than a hundred companies launch, rebrand and grow online.</strong><small class="text-muted">22 hours ago</small>
  </div>
</div>

8Equal card titles

Truncated titles keep a grid of cards the same height.

Our favourite tips for busy weeks: We test early with real users, so the final design works on the first day.

Jun 16, 2026

How to choose the right project: We listen first, then build a plan around what you actually need.

Jan 1, 2026

Choosing colours that sell: From logo to launch campaign, everything is designed to work together.

Dec 6, 2025

<div class="row g-3">
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 truncate">Our favourite tips for busy weeks: We test early with real users, so the final design works on the first day.</h3>
        <p class="small text-muted mb-0">Jun 16, 2026</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 truncate">How to choose the right project: We listen first, then build a plan around what you actually need.</h3>
        <p class="small text-muted mb-0">Jan 1, 2026</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h3 class="h6 truncate">Choosing colours that sell: From logo to launch campaign, everything is designed to work together.</h3>
        <p class="small text-muted mb-0">Dec 6, 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.

Ella Delgado10:45

We measure success by how many clients come back and tell their friends. Every detail is handled by people who care about getting it right.

Mia Hughes10:45

Senior designers lead every project from the first sketch to the final file. Start in minutes and get help from a real person whenever you need it.

Freya Carter17:00

Every project starts with a workshop, so we understand your audience before we design. Friendly people answer your questions quickly, by phone, chat or email.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex gap-2 items-center"><img src="../assets/img/avatar-12.svg" alt="" width="40" height="40" class="rounded-full">
  <div style="min-width:0" class="grow">
    <div class="flex">
      <strong class="small truncate">Ella Delgado</strong><small class="ms-auto ps-2 text-muted">10:45</small>
    </div>
    <div class="small text-muted truncate">
      We measure success by how many clients come back and tell their friends. Every detail is handled by people who care about getting it right.
    </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">Mia Hughes</strong><small class="ms-auto ps-2 text-muted">10:45</small>
    </div>
    <div class="small text-muted truncate">
      Senior designers lead every project from the first sketch to the final file. Start in minutes and get help from a real person whenever you need it.
    </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">Freya Carter</strong><small class="ms-auto ps-2 text-muted">17:00</small>
    </div>
    <div class="small text-muted truncate">
      Every project starts with a workshop, so we understand your audience before we design. Friendly people answer your questions quickly, by phone, chat or email.
    </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/experience/tutorial/getting-started-with-the-new-dashboard">example.com/update/tutorial/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.

Social kit Social edition

$1,800

Landing page Web edition

$3,350

UX audit Web edition

$2,850

Design retainer Branding edition

$3,650

<div class="row g-2">
  <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">
        Social kit Social edition
      </div>
      <strong class="small">$1,800</strong>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="border rounded-md p-2">
      <img src="../assets/img/product-8.svg" alt="" class="img-fluid rounded-md mb-1">
      <div class="small truncate">
        Landing page Web edition
      </div>
      <strong class="small">$3,350</strong>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="border rounded-md p-2">
      <img src="../assets/img/product-12.svg" alt="" class="img-fluid rounded-md mb-1">
      <div class="small truncate">
        UX audit Web edition
      </div>
      <strong class="small">$2,850</strong>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="border rounded-md p-2">
      <img src="../assets/img/product-5.svg" alt="" class="img-fluid rounded-md mb-1">
      <div class="small truncate">
        Design retainer Branding edition
      </div>
      <strong class="small">$3,650</strong>
    </div>
  </div>
</div>

12Truncated chips

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

What makes a brand memorableThe small habits that make a big differenceFive website mistakes that cost you leadsA beginner's guide to getting started

<div class="flex flex-wrap gap-2">
  <span class="badge rounded-full text-bg-light border inline-block truncate" style="max-width:9rem">What makes a brand memorable</span><span class="badge rounded-full text-bg-light border inline-block truncate" style="max-width:9rem">The small habits that make a big difference</span><span class="badge rounded-full text-bg-light border inline-block truncate" style="max-width:9rem">Five website mistakes that cost you leads</span><span class="badge rounded-full text-bg-light border inline-block truncate" style="max-width:9rem">A beginner&#39;s guide to getting started</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">Nimbus Kit</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">Theo Fischer (Finance Lead)</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

From logo to launch campaign, everything is designed to work together. We have helped more than a hundred companies launch, rebrand and grow online.

New

With min-width: 0

We listen first, then build a plan around what you actually need. Our motion team turns complex ideas into short films people actually watch.

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">
          From logo to launch campaign, everything is designed to work together. We have helped more than a hundred companies launch, rebrand and grow online.
        </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">
          We listen first, then build a plan around what you actually need. Our motion team turns complex ideas into short films people actually watch.
        </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-fill" aria-hidden="true"></i><span class="truncate">Content strategy Honest journey elegant</span></a></li>
    <li class="nav-item"><a class="nav-link flex gap-2 py-1 px-2" href="#"><i class="bi bi-folder-fill" aria-hidden="true"></i><span class="truncate">UX research Calm journey powerful</span></a></li>
    <li class="nav-item"><a class="nav-link flex gap-2 py-1 px-2" href="#"><i class="bi bi-folder-fill" aria-hidden="true"></i><span class="truncate">Brand identity Practical team simple</span></a></li>
    <li class="nav-item"><a class="nav-link flex gap-2 py-1 px-2" href="#"><i class="bi bi-folder-fill" aria-hidden="true"></i><span class="truncate">Content strategy Elegant launch smart</span></a></li>
  </ul>
</nav>

16Kanban card titles

Narrow board columns keep task titles tidy with truncation.

To do

Inside our design process

How we ran a rebrand in eight weeks

Doing

Why motion matters for modern brands

What our clients asked us most

Done

A checklist for your next website launch

Lessons from a year of client workshops

<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">
        Inside our design process
      </div>
      <div class="bg-page border rounded-md p-2 mt-2 small truncate">
        How we ran a rebrand in eight weeks
      </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">
        Why motion matters for modern brands
      </div>
      <div class="bg-page border rounded-md p-2 mt-2 small truncate">
        What our clients asked us most
      </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">
        A checklist for your next website launch
      </div>
      <div class="bg-page border rounded-md p-2 mt-2 small truncate">
        Lessons from a year of client workshops
      </div>
    </div>
  </div>
</div>

17Order summary address

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

Priya Kowalski, 33 Market Square, Vancouver 23988, Canada 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">Priya Kowalski, 33 Market Square, Vancouver 23988, Canada</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">Motion graphics for clients</span> </button>
  <ul class="dropdown-menu" aria-labelledby="hp-dd-1242">
    <li><a class="dropdown-item" href="#">Campaign production</a></li>
    <li><a class="dropdown-item" href="#">Campaign production</a></li>
  </ul>
</div>

19Playlist

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

Thoughtful design for ambitious companies3:14
Bold ideas, beautifully executed2:13
We make good brands great3:51

<ol class="list-group list-group-numbered">
  <li class="list-group-item flex gap-2"><span class="truncate">Thoughtful design for ambitious companies</span><small class="ms-auto text-muted">3:14</small></li>
  <li class="list-group-item flex gap-2"><span class="truncate">Bold ideas, beautifully executed</span><small class="ms-auto text-muted">2:13</small></li>
  <li class="list-group-item flex gap-2"><span class="truncate">We make good brands great</span><small class="ms-auto text-muted">3:51</small></li>
</ol>

20Full text in a tooltip

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

We measure success in sign-ups, sales and brand recall, not just awards. We keep things simple, so you can focus on what matters to you.

<span class="inline-block truncate hp-tt" style="max-width:16rem" tabindex="0" data-ui-toggle="tooltip" data-ui-title="We measure success in sign-ups, sales and brand recall, not just awards. We keep things simple, so you can focus on what matters to you.">We measure success in sign-ups, sales and brand recall, not just awards. We keep things simple, so you can focus on what matters to you.</span>