Open In App

What is the difference between “word-break: break-all” versus “word-wrap: break-word” in CSS ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The word-break property in CSS is used to specify how a word should be broken or split when reaching the end of a line. The word-wrap property is used to split/break long words and wrap them into the next line.

Difference between the “word-break: break-all;” and “word-wrap: break-word;”

  • word-break: break-all; It is used to break the words at any character to prevent overflow.
  • word-wrap: break-word; It is used to broken the words at arbitrary points to prevent overflow.

The “word-break: break-all;” will break the word at any character so the result is to difficulty in reading whereas “word-wrap: break-word;” will split word without making the word not break in the middle and wrap it into next line.

Example 1: This example display the break-all property values.




<!DOCTYPE html> 
<html
    <head
        <style
            p { 
                width: 142px; 
                border: 1px solid #000000; 
            
              
            p.gfg { 
                word-break: break-all; 
            
        </style
    </head
    <body
        <center
            <h1 style="color:green;">GeeksforGeeks</h1
            <h2>word-break: break-all;</h2
            <p class="gfg">GeeksforGeeksGeeksGeeks. A 
            computer science portal for geeks .</p
        </center
    </body
</html


Output:

Example 2: This example display the break-word property values.




<!DOCTYPE html> 
<html
    <head
        <style
            p { 
                width: 140px; 
                border: 1px solid #000000; 
                color:black; 
            
            p.gfg { 
                word-break: break-word; 
            
        </style
    </head
    <body
        <center
            <h1>GeeksforGeeks</h1
            <h2>word-break: break-word</h2
            <p class="gfg">GeeksforGeeksGeeksGeeks.A 
            computer science portal for geeks .</p
        </center
    </body
</html


Output:

Example 3: This example display the comparison of break-all and break-word property values.




<!DOCTYPE html>
<html>
      
<head>
      
    <!-- style to set word-break property -->
    <style>
        .wb {
            word-break: break-all;
            width: 140px; 
            border: 1px solid green;
        }
        .wr {
            word-wrap: break-word;
            width: 140px; 
            border: 1px solid green;
        }
        .main1 {
            width:50%;
            float:left;
        }
        .main2 {
            width:50%;
            float:left;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
          
        <div style = "width:100%;">
              
            <div class = "main1">
                <h2>word-break: break-all:</h2>
                  
                <div class="wb">
                    Prepare for the Recruitment drive of product
                    based companies like Microsoft, Amazon, Adobe
                    etc with a free online placement preparation
                    course. The course focuses on various MCQ's
                    & Coding question likely to be asked in the
                    interviews & make your upcoming placement
                    season efficient and successful.
                </div>
            </div>
              
            <div class = "main2">
                <h2>word-wrap: break-word:</h2>
                  
                <div class="wr">
                    Prepare for the Recruitment drive of product
                    based companies like Microsoft, Amazon, Adobe
                    etc with a free online placement preparation
                    course. The course focuses on various MCQ's
                    & Coding question likely to be asked in the
                    interviews & make your upcoming placement
                    season efficient and successful.
                </div>
            </div>
        </div>
    </center>
</body>
  
</html>                    


Output:



Last Updated : 12 Feb, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads