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 >
.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
Share your thoughts in the comments
Please Login to comment...