What is the difference between “word-break: break-all” versus “word-wrap: break-word” in CSS ?
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:
.png)
