Truncate Text | HTML.SHELLCREEPER.COM

Original Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a tortor quam. Vestibulum aliquet, diam eget dignissim vehicula, sapien sapien tempor velit, a ultrices tellus turpis nec nunc. Duis porta dapibus ligula vel semper.

CSS: Text Overflow

Results:

CSS Code:

/* Only for 1 line */
.box-css-text-overflow{
	display: block; /* can't use inline or inline-block */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

CSS: Fade

Results:

CSS Code:

/* Pretty much a hack */
.box-css-fade{
	position: relative;
	font-size: 17px;
	line-height: 25px;
	padding: 10px;
	height: 68px; /* 2 Line: ( 25px x 2 ) + ( 10px x 2 padding ) - 2px (border)  */
	overflow: hidden;
}
.box-css-fade:after {
	content: "";
	text-align: right;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 50%;
	height: 25px; /* Line height */
	background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

CSS: Webkit Line Clamp

Results:

CSS Code:

/* Not working in firefox. */
.box-css-webkit-line-clamp{
	display: block;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}