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

12 Feb, 2019
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:
CSS-Misc
Picked
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.