Google News
logo
CSS3 Text
CSS3 contains several text features:

1. text-overflow : The text-overflow property determines how overflowed content that is not displayed is signaled to users.
2. word-wrap : The Word wrapping is used to break the line and wrap onto next line.
3. word-break : The CSS3 word-break property specifies line breaking rules.
Property Description
text-overflow Text Overflow property determines how overflowed content that is not displayed is signaled to users.
word-break Break the line based on word
word-wrap Break the line and wrap onto next line
text-align-last Align the last line of a text
text-justify Text justified should be aligned and spaced
Text Overflow Example :
<html>
<head>
<title>Text Overflow</title>
<style type="text/css">
.overflow_text1 {  
white-space: nowrap;  
width: 300px;  
border: 1px solid #0099da;  
overflow: hidden;  
text-overflow: clip; 
}
.overflow_text2 { 
white-space: nowrap; 
width: 300px;  
border: 1px solid #0099da; 
overflow: hidden; 
text-overflow: ellipsis; 
}
</style>
      
   </head>
   <body>
   
      <b>Normal Text:</b>
 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
      
      <b>Text overflow:clip :</b>
      <p class="overflow_text1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
      
      <b>Text overflow:ellipsis :</b>
      <p class="overflow_text2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
      
   </body>
</html>
Output :
Normal Text:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Text overflow:clip :
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Text overflow:ellipsis :
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Word Wrapping Example :
<html>
   <head>
   <title>Word Wrap</title>

      <style type="text/css">
         .word_wrap_text { 
             width:250px; 
             border:1px solid #0099da;  
             word-wrap:break-word;
           }
      </style>
      
   </head>
   <body>
 
      <p class="word_wrap_text">
Lorem Ipsum is simply duuuuuuuuuuuuuummmmmmmmmmmmmmmmmmmmmmmyyyyyyyyyyyyyyyyy 
text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
     </p>
      
   </body>
</html>
Output :

Lorem Ipsum is simply duuuuuuuuuuuuuummmmmmmmmmmmmmmmmmmmmmmyyyyyyyyyyyyyyyyy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Word Breaking Example :
<html>
   <head>
   <title>Word Breaking</title>
      <style type="text/css">
         .word_break_text1 { 
           width: 250px; border: 1px solid #0099da;  
           word-break: keep-all;
            }
         .word_break_text2 { 
              width: 250px; 
              border: 1px solid #0099da;  
              word-break:break-all;
            }
      </style>
      
   </head>
   <body>
  
      
      <p class="word_break_text1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
      
 
      <p class="word_break_text2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
      
   </body>
</html>
Output :

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.