CSS3 text-overflow Property

Here is a brief explanation of how to hide the overflowed text content in CSS3.

Explanation

Property :

text-overflow: clip|ellipsis|inherit;

Where,
clip - Default value. Clips the text
ellipsis - Render an ellipsis ("...") to represent clipped text
string - Render the given string to represent clipped text
initial - Sets this property to its default value.
inherit - Inherits this property from its parent element.

Usage:


text-overflow: clip;
text-overflow: ellipsis;
text-overflow: inherit;

Definition:

The CSS3 text-overflow property specifies how not displayed overflowed content should be signaled to the user.

Example 1:


<div style='text-overflow: clip;
width: 200px;border: 5px solid indigo;
overflow: hidden;white-space: nowrap;'>
This example explains about the text-overflow property.</div>

Result:
This example explains about the text-overflow property.


Example 2:


<div style='text-overflow:ellipsis;
width: 200px;border: 5px solid indigo;
overflow: hidden;white-space: nowrap;'>
This example explains about the text-overflow property.</div>

Result:
This example explains about the text-overflow property.



Ask Questions

Ask Question