/    /  CSS text-overflow

CSS text-overflow

 

This CSS property representation of the text content will be displayed when it overflows the block container element that has overflow other than visible.

 

Syntax:

 

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

 

Property Values:

 

⦁          clip: It is the default value and that clips the overflowed text.

⦁          ellipsis: This value displays an ellipsis (?) or three dots to show the clipped text.

It is displayed within the area and  decreasing the amount of text.

⦁          string: The user using the string of the programmer’s choice. It works only in the

Firefox browser.

⦁          initial: It sets the property to its default value.

⦁          inherit: It inherits the property from its parent element.

 

 

Example:

 

<!DOCTYPE html>
<html>
<head>
<style>
div{
white-space: nowrap;
height: 30px;
width: 250px;
overflow: hidden;
border: 2px solid black;
font-size: 25px;

}
.itu{
text-overflow: clip;
}
.itu1 {
text-overflow: ellipsis;
}

h2{
color: blue;
}
div:hover {
overflow: visible;
}
p{
font-size: 25px;
font-weight: bold;
color: pink;
}
</style>
</head>
<center>
<body>
<p>Over the bordered text to see the full content. </p>

<h2>
text-overflow: clip;
</h2>

<div class="itu">
Welcome to the I2Tutorials
</div>
<h2>
text-overflow: ellipsis;
</h2>

<div class="itu1">
Welcome to the I2Tutorials</div>
</center>
</body>
</html>

 

OUTPUT:

 

CSS text-overflow