clock  Mon - Sun 8.00 AM - 8.00 PM
fb
instagram
play store
pinterest

More

CSS Text Overflow

teknowize

CSS Text Overflow

The text-overflow property specifies how overflowed content that is not displayed to the user. It can be clipped, display an ellipsis (...), or display a custom string.

Note:- The text-overflow: "string" only works in Firefox.

 

Syntax - 

text-overflow: value ;

 

values

clip

The text outside the given width area should be hidden.

ellipsis

IThe text outside the given width area should be hidden and display three dot  ("...") to representthe clipped text.
string
It is use to write custom short word like ‘etc’ thats we need to show in place of hidden word.

 

For example -

<!DOCTYPE html>
<html>

<head>
	<title>Text Overflow</title>
	<link rel="stylesheet" type="text/css" href="E:/style.css">

	<style>
		.clip {
			white-space: nowrap;
			width: 80px;
			overflow: hidden;
			text-overflow: clip;
		}

		.ellipsis {
			white-space: nowrap;
			width: 80px;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.string {
			white-space: nowrap;
			width: 80px;
			overflow: hidden;
			text-overflow: "----";
		}
	</style>
</head>

<body>
	<h1> text-overflow: clip </h1>
	<p class="clip">Teknowize.com is a online platform where you can learn web development.</p><br>
	<h1> text-overflow: ellipsis</h1>
	<p class="ellipsis"> Teknowize.com is a online platform where you can learn web development.</p><br>
	<h1> text-overflow: "----" (user defined string) </h1>
	<p class="string">Teknowize.com is a online platform where you can learn web development.</p><br>
</body>

</html>

 

Output

Text OverFlow

CSS