Open In App

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

Last Updated : 06 Jun, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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>                    


Output:

 



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads