text-overflow - HTML CSS CSS Property

HTML CSS examples for CSS Property:text-overflow

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. text-overflow

Description

The text-overflow CSS property sets how to display text during text overflows.

The following table summarizes the text-overflow Property.

Item Value
Default value: clip
Applies to:Block containers
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 


text-overflow:      clip | ellipsis | string | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
clip Clip text.
ellipsis Show an ellipsis ... for clipped text.
string Show the given string for clipped text.
initial Sets this property to its default value.
inherit take the value of its parent element text-overflow property.

The example below shows the text-overflow property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 text-overflow property</title>
  <style type="text/css">
    p {<!--  ww w .  j a  v a  2 s.c  o  m-->
      width: 400px;
      overflow: hidden;
      white-space: nowrap;
      background: #cccccc;
    }
    p.clipped {
      text-overflow: clip;
    }
    p.ellipses {
      text-overflow: ellipsis;
    }
    </style>
 </head>
 <body>
  <h1>Text-overflow Effect</h1>
  <h2>Clip the text at the limit of the content area</h2>
  <p class="clipped">This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. </p>
  <h2>Render an ellipsis ("...") to represent clipped text</h2>
  <p class="ellipses">This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. </p>
 </body>
</html>

Related Tutorials