HOLLA TECH - LEARN

The word-wrap Property
 

The word-wrap property allows long words to be broken and wrapped into the next line. It takes two values: normal and break-word.

In the example below, the word-wrap property is set to normal.
The CSS: 

p {
   width: 210px;
   height: 100px;
   border: 1px solid #000000;
   word-wrap: normal;
}

 

Result: 

Holla Tech - Learn CSS3
Now let’s see what happens when we use this same example and set the word-wrap property to break-word:

p {
   width: 210px;
   height: 100px;
   border: 1px solid #000000;
   word-wrap: break-word;
}

 

Result:

Holla Tech - Learn CSS3

NOTE!
When the word-wrap property is set to break-word, the browser breaks a word when it is too long to fit within its container.

BACK NEXT

CLICK ON THE BUTTON BELOW TO GO TO THE CSS MAIN COURSE PAGE. 

CSS MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT