Home > DeveloperSection > Blogs > Text-overflow Property using CSS3

Text-overflow Property using CSS3


CSS-CSS3 CSS-CSS3 
Ratings:
0 Comment(s)
 1570  View(s)
Rate this:

Text-overflow Property using CSS3

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:


Don't want to miss updates? Please click the below button!

Follow MindStick