CSS Text-Overflow

Introduction:

The text-overflow property of CSS is used to format the text which is overflowing the boundaries of the container. This property helps user to clip the text, to display the dots indicating that the text is incomplete (ellipsis) or to show the custom string.

It should be noted that text-overflow can be used only when the overflow property of a container has the value hidden, scroll or auto and white-space: nowrap;

This property is used when the text strings are too long, do not have spaces and are exist within the container which is not as wide as necessary.

<example>

Property Values:

text-overflow may property can have one or two values. If there is one value, it specifies overflow behaviour for the end of the line, and if there are two values, first value depicts the overflow for left end and second value depicts overflow for the right end.

The following values are values used with the text-overflow property:

• clip
• ellipsis
• string
• fade
• fade( <length> | <percentage>)
• initial
• inherit

• clip
  clip is a default value of text-overflow. It truncates the text to the limit of the content area allowing the truncation to occur in the middle of word or character.
  Once the text is clipped, it is not accessible by the user.
  Syntax:
  text-overflow: clip;

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div{
border: 2px solid;  
font-size: 25px;    
height: 50px; 
width: 300px; 
/*following are required for text-overflow */
white-space: nowrap;
overflow: hidden;
} 
.id{
text-overflow: clip;
}
h2{
color: tomato;
}
div:hover {
overflow: visible;  
} 
</style>
</head>
<body>
<h2>text-overflow: clip; </h2>
<div class="id">
This is an example of CSS text-overflow. The example display the clip value of this property
</div>
</body>
</html>

Output:

Here the text is clipped within the container specified. Once you hover over the box, it will display the whole text as shown below.

• ellipsis
  If the text is overflowing and you want to display an ellipsis ('…') in front of it, ellipsis value can be used. This property is used when the text is clipped and you want the user to know that there is further text which is clipped.
  Syntax:
  text-overflow: ellipsis;

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div{
border: 2px solid; 
font-size: 25px;
height: 50px; 
width: 300px; 
/*following are required for text-overflow *
white-space: nowrap;
overflow: hidden; 
} 
.id{
text-overflow: ellipsis;
}
h2{	
color: tomato;
}
div:hover {
overflow: visible; 
}
</style>
</head>
<body>
<h2>text-overflow: ellipsis; </h2>
<div class="id">
This is an example of CSS text-overflow. The example display the ellipsis value of this property
</div>
</body>
</html>

Output:

Here, the overflowing text is clipped and an ellipsis ('…') is displayed. Once you hover on the text, complete paragraph is displayed as shown below.

• string
  To clip the text and display a custom string, string type can be used. This string is visible inside the container. If the custom string itself is overflowing the container, the string is clipped
  Syntax:
  text-overflow: string;

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div{
border: 2px solid; 
font-size: 25px;
height: 50px;width: 300px; 
/*following are required for text-overflow */
white-space: nowrap;
overflow: hidden; 
} 
.id{
text-overflow: "Clipped text"; 
} 
h2{
color: tomato;
}
div:hover {
overflow: visible;
} 
</style>
</head>
<body>
<h2>text-overflow: string; </h2>
<div class="id">
This is an example of CSS text-overflow. The example display the string value of this property
</div>
</body>
</html>

Output:

Here "Clipped text" is the custom string used to depict that the overflown text is clipped. When you hover over the text, it displays the complete text as shown below.

• fade:
  This value clips the inline text which is overflowing and displays a fade-out effect near the border of the container.
  Even though it may seem amazing, this effect is not supported by any known web browser.
• fade( length | percentage):
  This function clips the inline text which is overflowing and displays a fade-out effect near the border of the container.
  The parameters <length> or <percentage> determines the distance over which the effect will be applied.
  The fade() is not supported by any of the web browsers.
• initial:
  The initial keyword assigns default value to the text-overflow property.
  Syntax:
  text-overflow: initial;

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 400px;
font-size: 25px;
white-space: nowrap; 
overflow: hidden;
text-overflow: initial;
}
div:hover {
overflow: visible; 
} 
h2{
color: skyblue;
}
</style>
</head>
<body>
<h2>text-overflow: initial; </h2>
<div class="id">
This is an example of CSS text-overflow. The example display the initial value of this property
</div>
</body>
</html>

Output:

Here the initial value sets the property to its default value. You can view the complete text by hovering over it.

• inherit:
  This value inherits the text-overflow property of its parent element.
  Syntax:
  text-overflow: inherit;

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
font-size: 25px;
border: 2px solid;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
h2{
width: 400px;
white-space: nowrap;
overflow: hidden;
text-overflow: inherit;
color: skyblue;
}
div:hover {  
overflow: visible; 
} 
h2:hover{
overflow: visible;
} 
</style>
</head>
<body>
<div>
<h2>text-overflow: inherit derives the property of its parent element </h2>  This is an example of CSS text-overflow. The example display the initial value of this property.
</div>
</body>
</html>

Output:

Here the <h2> tag inherits the ellipsis property of its parent element <div> tag. When you hover the mouse cursor on the text, it displays the complete text as shown below.

Thus, we have studied the CSS text-overflow property CSS and its various values used to manage the overflown text.