BootstrapHow-ToBeginner · 3 min read

How to Use Text Truncate in Bootstrap for Overflow Text

Use Bootstrap's text-truncate class on a block element inside a container with a fixed width and overflow: hidden to shorten overflowing text with an ellipsis. This ensures long text does not break your layout and shows a neat truncated preview.

📐

Syntax

The text-truncate class applies CSS rules to shorten text with an ellipsis when it overflows its container. It requires the container to have a fixed width and overflow: hidden.

text-truncate: adds white-space: nowrap;, overflow: hidden;, and text-overflow: ellipsis;.
Container: must have a fixed width (e.g., width: 200px;) and overflow: hidden; to clip the text.

html

<div style="width: 200px; overflow: hidden;">
  <p class="text-truncate">This is some very long text that will be truncated with an ellipsis.</p>
</div>

Output

A single line of text inside a 200px wide box, cut off with an ellipsis if too long.

💻

Example

This example shows how to use text-truncate inside a fixed-width container to shorten long text with an ellipsis.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Text Truncate Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .fixed-width {
      width: 250px;
      overflow: hidden;
      border: 1px solid #ccc;
      padding: 8px;
    }
  </style>
</head>
<body>
  <div class="fixed-width">
    <p class="text-truncate">This is a very long text that will not fit in the container and will be truncated with an ellipsis at the end.</p>
  </div>
</body>
</html>

Output

A narrow box with a single line of text that ends with an ellipsis if it is too long to fit.

⚠️

Common Pitfalls

Not setting a fixed width or max-width on the container causes text-truncate to have no effect because the container expands with the text.
Missing overflow: hidden; on the container prevents the ellipsis from showing.
Using text-truncate on inline elements like span without a constrained container will not work.

html

<!-- Wrong: No fixed width or overflow -->
<div>
  <p class="text-truncate">This text will not truncate because container expands.</p>
</div>

<!-- Right: Fixed width and overflow hidden -->
<div style="width: 200px; overflow: hidden;">
  <p class="text-truncate">This text will truncate with ellipsis.</p>
</div>

Output

First block shows full text without truncation; second block shows truncated text with ellipsis.

📊

Quick Reference

Class / Property	Purpose
text-truncate	Applies ellipsis truncation to text
width / max-width on container	Limits container size to trigger truncation
overflow: hidden on container	Hides overflowing text to show ellipsis
white-space: nowrap (via text-truncate)	Prevents text wrapping to multiple lines
text-overflow: ellipsis (via text-truncate)	Shows '...' for clipped text

✅

Key Takeaways

Apply text-truncate on a block element inside a container with fixed width and overflow hidden.

Without a fixed width and overflow hidden on the container, truncation will not work.

The text-truncate class uses CSS properties to show an ellipsis for overflow text.

Use text-truncate only for single-line truncation, not multi-line.

Test your layout in different screen sizes to ensure truncation behaves as expected.