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>