Text wrap

Bootstrap 5 Text wrap component

Responsive Text wrap built with Bootstrap 5. Simple examples of how to wrap, unwrap or truncate the text.

Basic example

Wrap text with a .text-wrap class.

This text should wrap.
Edit in sandbox 
<div class="badge bg-primary text-wrap" style="width: 6rem">This text should wrap.</div>

Prevent text from wrapping with a .text-nowrap class.

This text should overflow the parent.
Edit in sandbox 
<div class="text-nowrap bd-highlight" style="width: 8rem">This text should overflow the parent.</div>

Text truncate

For longer content, you can add a .text-truncate class to truncate the text with an ellipsis. Requires display: inline-block or display: block.

Praeterea iter est quasdam res quas ex communi.

Praeterea iter est quasdam res quas ex communi.

Praeterea iter est quasdam res quas ex communi.

Edit in sandbox 
<p>
    Praeterea iter est quasdam res quas ex communi.
</p>
<!-- Block level -->
<div class="row">
    <p class="col-2 text-truncate">
        Praeterea iter est quasdam res quas ex communi.
    </p>
</div>

<!-- Inline level -->
<p class="d-inline-block text-truncate" style="max-width: 250px;">
    Praeterea iter est quasdam res quas ex communi.
</p>