CSS3 - Text


Advertisements


CSS3 contained several extra features, which is added later on

  • text-overflow
  • word-wrap
  • word-break

There are following most commonly used property in CSS3

Values Description
text-align-last Used to align the last line of the text
text-emphasis Used to emphasis text and color
text-overflow used to determines how overflowed content that is not displayed is signaled to users
word-break Used to break the line based on word
word-wrap Used to break the line and wrap onto next line

Text-overflow

The text-overflow property determines how overflowed content that is not displayed is signaled to users. the sample example of text overflow is shown as follows −

<html>
   <head>
   
      <style>
         p.text1 {
            white-space: nowrap; 
            width: 200px; 
            border: 1px solid #000000;
            overflow: hidden;
            text-overflow: clip;
         }
         p.text2 {
            white-space: nowrap; 
            width: 200px; 
            border: 1px solid #000000;
            overflow: hidden;
            text-overflow: ellipsis;
         }
      </style>
      
   </head>
   <body>
   
      <b>Original Text:</b>
   
      <p>Tutorials Point originated from the idea that there exists a class of 
      readers who respond better to online content and prefer to learn new skills at 
      their own pace from the comforts of their drawing rooms.</p>
      
      <b>Text overflow:clip:</b>
   
      <p class="text1">Tutorials Point originated from the idea that there exists
      a class of readers who respond better to online content and prefer to learn 
      new skills at their own pace from the comforts of their drawing rooms.</p>
      
      <b>Text overflow:ellipsis</b>
   
      <p class="text2">Tutorials Point originated from the idea that there exists
      a class of readers who respond better to online content and prefer to learn
      new skills at their own pace from the comforts of their drawing rooms.</p>
      
   </body>
</html>

It will produce the following result −

CSS3 Word Breaking

Used to break the line, following code shows the sample code of word breaking

<html>
   <head>
   
      <style>
         p.text1 {
            width: 140px; 
            border: 1px solid #000000;
            word-break: keep-all;
         }
         p.text2 {
            width: 140px; 
            border: 1px solid #000000;
            word-break: break-all;
         }
      </style>
      
   </head>
   <body>
   
      <b>line break at hyphens:</b>
      <p class="text1">Tutorials Point originated from the idea that there exists a class of
      readers who respond better to online content and prefer to learn new skills at
      their own pace from the comforts of their drawing rooms.</p>
      
      <b>line break at any character</b>
   
      <p class="text2">Tutorials Point originated from the idea that there exists a class of 
      readers who respond better to online content and prefer to learn new skills at their
      own pace from the comforts of their drawing rooms.</p>
      
   </body>
</html>

It will produce the following result −

CSS word wrapping

Word wrapping is used to break the line and wrap onto next line.the following code will have sample syntax

p {
   word-wrap: break-word;
}


Advertisements