Post
Ask Question

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 breaks words only at given breakpoints, 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.          h3 {      
  9.          color: initial;       
  10.          }      
  11.       </style>  
  12.    </head>  
  13.    <body>  
  14.       <div>  
  15.          <h3>Even being inside 'div' I am BLACK instead of BLUE       
  16.             <br>(Due to color property set to "initial")      
  17.          </h3>  
  18.          <br>      
  19.          <p>Thank God I am inside 'div' and I am also BLUE       
  20.             <br>(Due to color property set to "blue").      
  21.          </p>  
  22.       </div>  
  23.       <p>I am not affected any more :) </p>  
  24.    </body>  
  25. </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.       </div>  
  24.       <br>    
  25.       <br>    
  26.       <div class="unique" style="color:red">    
  27.          I am unique     
  28.          <span>    
  29.          <b>SPAN element</b>    
  30.          </span> and I am     
  31.          <span>    
  32.          <b>RED</b>    
  33.          </span>, because I inherit my color from my parent.    
  34.       </div>  
  35.       <br>    
  36.       <div class="unique" style="color:cyan">    
  37.          I am also unique     
  38.          <span>    
  39.          <b>SPAN element</b>    
  40.          </span> and I am     
  41.          <span>    
  42.          <b>CYAN</b>    
  43.          </span>, because I also inherit my color from my parent.    
  44.       </div>  
  45.       <br>    
  46.       <br>    
  47.       <div style="color:green">    
  48.          I am also     
  49.          <span>    
  50.          <b>SPAN element</b>    
  51.          </span> and I am also     
  52.          <span>    
  53.          <b>BLUE    
  54.          <b>    
  55.          </span>, as set without bothering my other parts.    
  56.       </div>  
  57.    </body>  
  58. </html> 
Output
 
Output
 
Thank you, keep learning and sharing.


Similar Articles