Bootstrap 5 Text wrapping and overflow


Text wrapping and overflow class is used to specify that the browser may break lines of text inside any targeted element to prevent overflow when the original string is too long to fit.

  • .text-wrap: This class is used to wrap up the content.
  • .text-nowrap: This class is used to not wrap the element.
Example
<div class=" bg-info text-wrap" style="width:10%;">
  This text should wrap.
</div>
<div class="text-nowrap bg-info" style="width:10%;">
  This text should overflow the parent.
</div>
Try it Yourself

Output: