Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Text Truncation in Bootstrap 5
Text Truncation: Limits text to a single line with ellipsis (...) when it overflows.
What is Text Truncation?
Text truncation cuts off text that exceeds its container width and adds an ellipsis (...) to indicate there's more content. Useful for cards, tables, and navigation items.
Basic Text Truncation
Single Line Truncation
Without Truncation
This is a very long text that will overflow its container because it's too long to fit in one line.
With Truncation
This is a very long text that will overflow its container because it's too long to fit in one line.
Short text that fits completely
Very long text that will be truncated with ellipsis at the end
Product name with long description
User email address that might be very long
<!-- Basic text truncation -->
<p class="text-truncate">
Very long text that will be truncated...
</p>
<!-- With container width -->
<div style="width: 200px;">
<p class="text-truncate">
Text inside fixed width container
</p>
</div>
<!-- Inline elements -->
<span class="text-truncate d-inline-block" style="max-width: 150px;">
Inline text truncation
</span>Text Truncation with Tooltips
Showing Full Text on Hover
Amazing Product with Very Long Name and Features
Product description that is very long and needs to be truncated in the card preview...
Electronics › Computers › Laptops › Gaming$999
| Product Name | Description | Category |
|---|---|---|
| Ultra Gaming Laptop with RGB Keyboard and High Refresh Rate Display | High-performance gaming laptop with latest GPU, fast processor, and premium build quality... | Gaming Electronics › Laptops |
<!-- Text truncation with Bootstrap tooltips -->
<span class="text-truncate d-inline-block"
style="max-width: 150px;"
data-bs-toggle="tooltip"
title="Complete text content here">
Truncated text that shows tooltip on hover
</span>
<!-- Initialize tooltips -->
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>Multi-line Text Truncation
Line-clamp Technique (Custom CSS)
2-line Truncation
This text will be limited to 2 lines. If it exceeds two lines, it will show ellipsis at the end of the second line. Perfect for short descriptions.
.text-truncate-23-line Truncation
This text will be limited to 3 lines. If it exceeds three lines, it will show ellipsis. Useful for longer previews like article excerpts or product descriptions in grids.
.text-truncate-34-line Truncation
This text will be limited to 4 lines. Maximum for most preview scenarios. Good for detailed descriptions while maintaining clean layout. Shows ellipsis when text is too long.
.text-truncate-4Custom CSS for Multi-line Truncation
/* Custom CSS for multi-line text truncation */
.text-truncate-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.text-truncate-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.text-truncate-4 {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
/* Responsive multi-line truncation */
@media (max-width: 768px) {
.text-truncate-responsive {
-webkit-line-clamp: 2;
}
}
@media (min-width: 769px) {
.text-truncate-responsive {
-webkit-line-clamp: 3;
}
}Note: Multi-line truncation uses
-webkit-line-clamp which has good browser support but check compatibility for older browsers.Text Truncation in Different Components
Cards
Product Card with Very Long Title That Needs Truncation
Product description that explains all features in detail. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Category: Electronics › Computers › AccessoriesIn Stock
<div class="card">
<div class="card-body">
<h5 class="card-title text-truncate">
Long product title
</h5>
<p class="card-text text-truncate-3">
Product description...
</p>
<div class="d-flex justify-content-between">
<span class="text-truncate" style="max-width: 70%;">
Long category path
</span>
<span class="badge bg-success">Stock status</span>
</div>
</div>
</div>Navigation & Breadcrumbs
<!-- Breadcrumbs with truncation -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#" class="text-truncate d-inline-block" style="max-width: 80px;">
Home
</a>
</li>
</ol>
</nav>
<!-- List group with truncation -->
<div class="list-group">
<a href="#" class="list-group-item d-flex justify-content-between">
<span class="text-truncate me-2" style="max-width: 200px;">
Long navigation item name
</span>
<span class="badge bg-primary">Count</span>
</a>
</div>Responsive Text Truncation
Mobile
On mobile: This text will be truncated to fit small screens
On desktop: Full text visible
Tablet
On tablet: Medium truncation
Desktop
On desktop: Minimum truncation
<!-- Responsive truncation --> <p class="text-truncate d-md-none"> Truncated on mobile only </p> <p class="text-truncate d-none d-md-block d-lg-none" style="max-width: 150px;"> Truncated on tablet only </p> <p class="d-none d-lg-block"> Full text on desktop </p> <!-- Dynamic max-width --> <p class="text-truncate" style="max-width: 100%; max-width: Min(200px, 100%);"> Responsive max-width </p>
Accessibility Considerations
Accessibility Best Practices
- Tooltips: Always provide tooltips showing full text
- Screen readers: Ensure full text is available in HTML
- Keyboard navigation: Make truncated elements keyboard accessible
- Focus states: Maintain visible focus indicators
- Context: Don't truncate critical information
- Alternatives: Provide alternative ways to view full content
JavaScript Solutions
Dynamic Text Truncation with JavaScript
This text will be dynamically truncated based on container size. Resize your browser to see it adjust automatically.
// JavaScript for dynamic truncation
function truncateText(element, maxLength) {
let text = element.textContent;
if (text.length > maxLength) {
element.textContent = text.substring(0, maxLength) + '...';
element.setAttribute('title', text); // Add tooltip
}
}
// Responsive truncation based on screen size
function responsiveTruncate() {
const elements = document.querySelectorAll('.responsive-truncate');
elements.forEach(element => {
let maxLength = 50; // Default for mobile
if (window.innerWidth >= 768) {
maxLength = 100; // Tablet
}
if (window.innerWidth >= 992) {
maxLength = 150; // Desktop
}
truncateText(element, maxLength);
});
}
// Initialize on load and resize
window.addEventListener('load', responsiveTruncate);
window.addEventListener('resize', responsiveTruncate);