In this blog I have tried to explain how to use overflow property using CSS3 and HTML.

The text-overflow property specifies what should happen when text length overflows the containing element.

Here are two text-overflows property values:

A.    ellipsis: it will made the ellipsis when text length overflows the containing element.

B.   Clip: it will Clips the text when text length overflows the containing element .

<!DOCTYPE html>
<html>
<head>
<style>
div.demo
{
white-space:nowrap;
width:12em;
overflow:hidden;
border:1px solid #CD853F;
color:#CD853F;
font-size:1.2em;
}
p
{
color:#CD853F;
font-size:1.2em;
}
</style>
</head>
<body>
<p>In this div uses the style of "text-overflow:ellipsis":</p>
<div class="demo" style="text-overflow:ellipsis;">mindstick unleash your imagination</div> <p>In this div uses the style of "text-overflow:clip":</p>
<div class="demo" style="text-overflow:clip;">mindstick unleash your imagination</div> </body>
</html>

Below is Output:

  Modified On Sep-18-2014 01:24:07 PM

Leave Comment