Trim a text and show an ellipsis instead full text with CSS

In case we have a div element with fixed width, for example 100 pixels, and we only want to show an excerpt of text instead showing full text, let’s use this simple css trick.

For example, look at this before and after image:

And here is a few lines of css codes we can use:

.shorttext{
	width: 100px;
	display: inline-block;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}