The text-overflow property cuts off text that’s too long to fit, optionally replacing with ellipsis. In other word this property specifies what happens when text overflows the content. 

The text-overflow property must be used in conjunction with the overflow property, as well as white-space property; more precisely the overflow property must have a value of hidden, scroll or auto, while the white-space property must be set to no-wrap.

Syntax:

selector { 

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

}

Values:

Following values are permitted to be used with text-overflow property:

  • clip; Default value which clips the text.
  • string; Renders the given string to represent clipped text.
  • ellipsis; Renders an ellipsis (“…”) to represent clipped text.
  • initial, inherit

Example

The text-overflow property example with string, ellipses and default clip values.

​x
 
<!DOCTYPE html>
<html>
<head><style type="text/css">
h5 {
    margin:0.8em 0 0 0.8em;
}
p {
    padding:0.6em; margin:0px;
    white-space: nowrap; 
    width: 10em; 
    border:2px solid blue;
    overflow: hidden;
    text-overflow: clip;
}
#p1 {
    border:2px solid green;
    text-overflow: ellipsis;
}
#p2 {
    border:2px solid red;
    text-overflow: string;
}
</style></head>
​
<body>
​
<h5>CLIP:</h5>
<p>This paragraph should CLIP the text.</p>
  
<h5>ELLIPSIS:</h5>
<p id="p1">This paragraph should create ELLIPSIS.</p>
  
<h5>STRING:</h5>
<p id="p2">This paragraph uses a STRING value.</p>
  
</body>
</html>

 

›› go to examples ››