CSS Introduction

CSS Tutorial What is CSS CSS Syntax CSS Selector How to include CSS CSS Comments

CSS Attributes

CSS Background CSS Border CSS Display CSS Float CSS Font CSS Color CSS Hover CSS Important CSS Line-height CSS Margin CSS Opacity CSS Filter CSS Images CSS Overflow CSS Padding CSS Position CSS Vertical align CSS White space CSS Width Word-wrap in CSS Box-shadow in CSS Text-transform in CSS CSS Outline CSS Visibility CSS Counters CSS Clear fix CSS Icons CSS Justify-content Text-decoration in CSS CSS Lists CSS nth selector CSS Sticky CSS Background-clip CSS Checkbox-style CSS Letter-spacing CSS Navigation bar CSS Overlay CSS Root CSS Specificity CSS Text-indent CSS Text-stroke CSS Zoom CSS Order CSS Descendent selector CSS Clip CSS calc() CSS Background-blend-mode CSS radio-button CSS Superscript and subscript CSS Text-effects CSS Text-align CSS Variables CSS Page-break-before CSS Page-break-inside CSS Page-break-after CSS Content property CSS Word-spacing CSS Animation CSS @keyframes rules CSS Pseudo-classes CSS Pseudo-elements CSS Radial-gradient CSS Translate CSS Gradients CSS z-index CSS Loaders CSS Units CSS Transition CSS Masking CSS Arrow CSS Pagination

Misc

What is Bootstrap CSS What is CSS used for Difference between HTML and CSS How to center a table in CSS What is a CSS File How to center a button in CSS How to change background color in CSS How to change the font in CSS How to change font size in CSS How to resize an image in CSS How to get rid of bullet pioints in CSS Is CSS a programming language Grid Vs Flexbox in CSS How to edit CSS in WordPress How to use google fonts in CSS

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:

css-text-overflow

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

css-text-overflow
  • 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:

css-text-overflow

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

css-text-overflow
  • 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:

css-text-overflow

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.

css-text-overflow
  • 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:

css-text-overflow

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

css-text-overflow
  • 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:

css-text-overflow

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.

css-text-overflow

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



ADVERTISEMENT
ADVERTISEMENT