Text Overflow
Text Overflow
Now here we start a new topic Text-overflow:-
Another type of Overflow hidden and hover
When you put cursor on box it displays output
<!DOCTYPE html>
<html>
<head>
<style>
.a {
width: 50px;
text-overflow: ellipsis;
overflow: hidden;
border: 1px solid #000000;
}
div.a {
white-space: nowrap;
width: 20%;
overflow: hidden;
border: 2px solid green;
}
div.a:hover {
text-overflow: inherit;
overflow: visible;
}
</style>
</head>
<body>
<h1>Example of text-overflow Property</h1>
<div class="a">This is a text overflow property. How can we use it</div><br>
<div class="a" style="text-overflow: inherit;">Text-overflow hidden and show after
hover</div>
<br>
<div class="a" style="text-overflow: initial;">Text-overflow hidden and show after hover</div>
</body>
</html>
Now here we start a new topic Text-overflow:-
Another type of Overflow hidden and hover
When you put cursor on box it displays output
<!DOCTYPE html>
<html>
<head>
<style>
.a {
width: 50px;
text-overflow: ellipsis;
overflow: hidden;
border: 1px solid #000000;
}
div.a {
white-space: nowrap;
width: 20%;
overflow: hidden;
border: 2px solid green;
}
div.a:hover {
text-overflow: inherit;
overflow: visible;
}
</style>
</head>
<body>
<h1>Example of text-overflow Property</h1>
<div class="a">This is a text overflow property. How can we use it</div><br>
<div class="a" style="text-overflow: inherit;">Text-overflow hidden and show after
hover</div>
<br>
<div class="a" style="text-overflow: initial;">Text-overflow hidden and show after hover</div>
</body>
</html>
Comments
Post a Comment