HTML 5

Word Wrapping in CSS

CSS Word wrap

Word wrapping is the property of CSS that breaks long words and wraps or rolls them onto the next line so that it can prevent the overflow of unbreakable strings that are too long to be adjusted or fit into the specified container.

Values of word wrap

Values of word wrap

Now let’s see a simple example for each property value to understand properly.

Example: Normal

  1. <html>  
  2.     <head>  
  3.         <style>   
  4. p.Normal {   
  5. width: 9em;   
  6. background-color: #00ff00;   
  7. border: 3px solid #000fff;   
  8. padding:10px;   
  9. word-wrap: normal;   
  10. }   
  11. </style>  
  12.     </head>  
  13.     <body>  
  14.         <p class="Normal"> This paragraph contains, very long words like:   
  15. More dddoooooooooooooooooooooorrrrrrrrrrrr and ppppppaaaaaaaaaaaaassssss. The long words will break and wrap onto the next line.</p>  
  16.     </body>  
  17. </html>  
Output

Normal

In the preceding output, you can see that when we apply the normal property value, it only break words only at given break points, not the long words that are going outside the container.

Example: Break-word

When we apply break-word then:

word-wrap: break-word;

Output

Break word

Now the long words are also broken and fit in the container after applying break-word.

Example: Initial
  1. <html>  
  2.     <head>  
  3.         <style>  
  4. div {  
  5. color: blue;   
  6. border: 1px solid red;  
  7. }  
  8.   
  9. h3 {  
  10. color: initial;   
  11. }  
  12. </style>  
  13.     </head>  
  14.     <body>  
  15.         <div>  
  16.             <h3>Even being inside 'div' I am BLACK instead of BLUE   
  17.   
  18.                 <br>(Due to color property set to "initial")  
  19.                 </h3>  
  20.                 <br>  
  21.                     <p>Thank God I am inside 'div' and I am also BLUE   
  22.   
  23.                         <br>(Due to color property set to "blue").  
  24.                         </p>  
  25.                     </div>  
  26.                     <p>I am not affected any more :) </p>  
  27.                 </body>  
  28.             </html>  
Output

Initial

Example: Inherit
  1. <html>  
  2.     <head>  
  3.         span {  
  4. color: blue;  
  5. }  
  6. .unique span {  
  7. color: inherit;  
  8. border: 1px solid black;  
  9. }  
  10.     </style>  
  11. </head>  
  12. <body>  
  13.     <div>  
  14. I am   
  15.         <span>  
  16.             <b>SPAN element  
  17.                 <b>  
  18.                 </span> and I am   
  19.                 <span>  
  20.                     <b>BLUE  
  21.                         <b>  
  22.                         </span>, as set without bothering my other parts.  
  23.   
  24.                     </div>  
  25.                     <br>  
  26.                         <br>  
  27.                             <div class="unique" style="color:red">  
  28. I am unique   
  29.                                 <span>  
  30.                                     <b>SPAN element</b>  
  31.                                 </span> and I am   
  32.                                 <span>  
  33.                                     <b>RED</b>  
  34.                                 </span>, because I inherit my color from my parent.  
  35.   
  36.                             </div>  
  37.                             <br>  
  38.                                 <div class="unique" style="color:cyan">  
  39. I am also unique   
  40.                                     <span>  
  41.                                         <b>SPAN element</b>  
  42.                                     </span> and I am   
  43.                                     <span>  
  44.                                         <b>CYAN</b>  
  45.                                     </span>, because I also inherit my color from my parent.  
  46.   
  47.                                 </div>  
  48.                                 <br>  
  49.                                     <br>  
  50.                                         <div style="color:green">  
  51. I am also   
  52.                                             <span>  
  53.                                                 <b>SPAN element</b>  
  54.                                             </span> and I am also   
  55.                                             <span>  
  56.                                                 <b>BLUE  
  57.                                                     <b>  
  58.                                                     </span>, as set without bothering my other parts.  
  59.   
  60.                                                 </div>  
  61.                                             </body>  
  62.                                         </html>  
Output

Output

Thank you, keep learning and sharing.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs