Wrapping overflowed text with trailing dots ( ellipsis ) using css

Wrapping overflowed text with trailing dots ( ellipsis ) using css

2 min. read

HTML markup

<!DOCTYPE html>
<html>
	<head>
		<title>Wrapping overflowed text with ellipsis</title>
	</head>
	<body>
		<div id="box">Hold it tightly because it is a special hand. Make it feel free because it can use its own strength. It is ur part but not u. A special hand, not under u, but for u.</div>
	</body>
</html>

CSS rules

body 
{
	padding: 50px;
}

#box 
{
	width: 302px;
	margin: 0 auto;
	font-family: Nunito, Helvetica, arial, sans-serif;
	text-align: center;
	padding: 10px;
	border: 1px solid #ccc;
}

See result in the fiddle below

Displaying the text as we typed it i.e in one line, this is where white-space property comes to work.

Click here to read more about white-space property

Adding more css to div#box

#box
{
	white-space:pre;
}

See result in the fiddle below

In above fiddle we can see that the text is displayed same as we typed it i.e in one line, this is what white-space : pre property do, it preserves all the white spaces that you typed ( white spaces are not ignored ).

In our case we applied white-space property on div#box element so our content is displayed as we typed it, white spaces are preserved. This is similar to putting content in <pre> </pre> tags.

Main part of css : wrapping overflowed text with trailing dots ( ellipsis )

Adding more css to div#box

#box
{
	overflow:hidden;
	text-overflow:ellipsis;
}

Combining all the above css, see final result in the fiddle below

Write comments