How do I truncate long text with ellipsis in a responsive card title?

Asked on Aug 07, 2025

1 Answer

To truncate long text with an ellipsis in a responsive card title using Bootstrap 5, you can use the utility class `text-truncate`. This class ensures that the text is truncated with an ellipsis when it overflows its container.

<!-- BEGIN COPY / PASTE -->
        <div class="card" style="width: 18rem;">
            <div class="card-body">
                <h5 class="card-title text-truncate" style="max-width: 150px;">This is a very long card title that will be truncated</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `text-truncate` class applies `overflow: hidden; text-overflow: ellipsis; white-space: nowrap;` to the element.
Ensure the parent container has a defined width (e.g., `style="max-width: 150px;"`) for truncation to work.
Adjust the `max-width` value as needed to fit your design requirements.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions