Syntax error Determine how overflowed content that is not displayed is signaled to users with CSS

Determine how overflowed content that is not displayed is signaled to users with CSS

The text-overflow property is used to determine how overflowed content that is not displayed is signaled to users with CSS.

Example

You can try to run the following code to implement a text-overflow property in CSS:

Live Demo

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

Output

Updated on: 2020-06-20T13:45:08+05:30

142 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements