CSS ellipsis text

2018 07 05 No Comments

CSS3 gave us perfect property: text-overflow.
We have ability to cut off words.

In CSS pre-processer there are many mixins, I know. But I wanted to share my little mixin 😀

Use like this:

.ellipsis-text(@LineNumber);

See the Pen RJmQXG by ozer (@ozer) on CodePen.

Also SASS version

@mixin ellipsis($line) {
	display: -webkit-box;
	-webkit-line-clamp: $line;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
/*
usage:
@include ellipsis(2);
*/

Leave a Reply

Your email address will not be published. Required fields are marked *