Three dots at the end of text

Details
Written by: Stanko Milosev
Category: CSS
Hits: 4146

To add three dots at the of too long text can be done with text-overflow: ellipsis.

HTML:

<!DOCTYPE html>
<html>

	<head>
		<link type="text/css" rel="stylesheet" href="/index.css">
	</head>
	
	<body>
		<div id="textEllipsis">The quick brown fox jumps over the lazy dog</div>
	<body>

</html>

CSS:

#textEllipsis {
	text-overflow: ellipsis;
	width: 200px;
	white-space: nowrap;
	overflow: hidden;
}

The only problem with this approach is if you need wordwrap then it seems that you will have to use javascript...