CSS3 Text

CSS3 contained several extra features, which is added later on

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>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">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">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 –

Original Text:

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.

Text overflow:clip

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.

Text overflow:ellipsis

Tutorials Point originated from the idea that there exists a class of readers who re

 

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">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 –

line break at hyphens:

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.

line break at any character

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.

 

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;

}