Bootstrap Text Truncate — How to Truncate Long Text with Bootstrap
Bootstrap Text Truncate is a quick way to shorten long text and add ellipsis. Here’s how to truncate text with one Bootstrap class.
How to Use Bootstrap Text Truncate
</p>
<div class=”text-truncate” style=”width: 200px;”> This is a very long text that will be truncated. </div> How Bootstrap Text Truncate Works
The text-truncate class uses overflow: hidden, text-overflow: ellipsis, and white-space: nowrap to cut off text with an ellipsis.
Why Use Bootstrap Text Truncate
Bootstrap Text Truncate keeps your UI clean by preventing text overflow.
Common Mistake in Bootstrap Text Truncate
Forgetting to set a fixed width or max-width — text-truncate won’t work without it.
Pro Tip for Bootstrap Text Truncate
Combine text-truncate with d-inline-block to truncate inline elements like spans.