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:
Please Login to comment...