How to wrap or break long text/word in a fixed width span ?

Last Updated : 06 Jun, 2022

In this article, we will see how to wrap long text/word in a fixed-width span. The word-wrap property in CSS is used to break long words and wrap them into the next line. It defines whether to break words when the content exceeds the boundaries of its container.

Syntax:

word-wrap: normal|break-word|initial|inherit;

Example 1: The following code demonstrates the “normal” value for the word-wrap property. The text is broken which is shown by a border.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
        div  
        { 
          word-wrap:normal; 
          width: 150px; 
          border: 1px solid black; 
        } 
    </style> 
</head> 
      
<body> 
    <h2 style="color:green">GeeksforGeeks</h2> 
    <div> 
        GeeksforGeeks:AComputerSciencePortalForGeeks 
    </div>     
</body> 
</html>                     

Output:

Example 2: The following code demonstrates the “break-word” value for the word-wrap property. The text is broken which is shown in the next line inside the bordered box as it exceeds the given width.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
        div  
        { 
         word-wrap:break-word; 
         width: 150px; 
         border:1px solid black; 
        } 
    </style> 
</head> 
<body> 
    <h2 style="color:green">GeeksforGeeks</h2> 
    <div> 
        GeeksforGeeks:AComputerSciencePortalForGeeks 
    </div>     
</body> 
</html>                     