Bootstrap 5 Text wrapping and overflow

Last Updated : 12 Dec, 2022

Bootstrap 5 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.

Bootstrap 5 Text wrapping and overflow Classes:

text-wrap: This class is used to wrap up the content.
text-nowrap: This class is used to not wrap the element.

Syntax:

<tag class="text-wrap">
     ...
</tag>

The below example illustrates the Text wrapping and overflow.

Example 1: In the following code, we will wrap the element.

HTML

<html>
   
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">   
</head>
   
<body class="m-3">
    <h1 class="text-success text-center">
        Geeksforgeeks
    </h1>
   <!-- Bootstrap text-wrap class used -->
    <p class="bg-success text-wrap" style="width:120px;">
        A Computer Science Portal for Geeks
    </p>
</body>
</html>

Output:

Bootstrap 5 Text wrapping and overflow

Example 2: In the following code, we will not wrap the element.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
         rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">    
</head>
 
<body class="m-3">
    <h1 class="text-success text-center">
        Geeksforgeeks
    </h1>
   <!-- Bootstrap text-wrap class used -->
    <p class="bg-success text-nowrap"
        style="width:120px;">
        A Computer Science Portal for Geeks
    </p>
</body>
</html>