How can I clamp multi-line text to 2 lines using utilities?

Asked on Aug 09, 2025

1 Answer

To clamp multi-line text to 2 lines in Bootstrap 5, you can use the utility classes for text truncation. Here's a simple example using CSS to achieve this effect.

<!-- BEGIN COPY / PASTE -->
        <div class="text-truncate" style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">
            This is a long text that will be clamped to two lines. If the text exceeds two lines, it will be truncated with an ellipsis.
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `text-truncate` class is used for basic text truncation.
The custom CSS properties `-webkit-line-clamp`, `-webkit-box-orient`, and `overflow` are used to limit the text to 2 lines.
This approach leverages CSS Flexbox properties to achieve multi-line clamping.
Ensure the container has a fixed width for the truncation to work effectively.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions