home

CSS3 Word Wrap Property

This can make word break down into another line if the word is containing with many letters. Sometimes words may come longer it will continue out of the box or text contains also its looks hard. So with using css3 word-wrap property, it can make the break down the word into the second line.

Css3 Word Wrapping demo

This is paragraph text contains with loooooooooooooooooooooooooooooooooooooooonger word

Css3 Word Wrapping Code

word-wrap: break-word;
<div class="with-word-wrap">looooooooooooooooooooooooooooonger word for example</div>
<style>
.with-word-wrap{
    width: 150px; 
    border: 2px solid #ff0000;
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
</style>

Without Css3 Word Wrapping demo

Here we have small paragraph with longer word without word-wrap property

This is paragraph text contains with loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger word

Without Css3 Word Wrapping demo

Here we have small paragraph with longer word with word-wrap property

<div class="with-word-wrap">looooooooooooooooooooooooooooonger word for example</div>
  <style>
    .with-word-wrap{
    width: 150px; 
    border: 6px solid #ff00ff;
   }
</style>