Truncate Text Fading It

by Neviton

HTML

<p class="truncate-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam doloribus similique quibusdam accusantium quo necessitatibus, aliquam molestiae, ea laudantium harum tempora, expedita iusto enim debitis, porro eius. Repudiandae debitis, quod.</p>

SCSS

$fade-color: silver;

.truncate-text {
	position: relative;
	font-size: 20px;
	line-height:1.4em; 
	max-height: 2.8em;
	background-color: $fade-color;
	//white-space: nowrap;
	overflow: hidden;
	&:after {
		position: absolute;
		right: 0;
		bottom: 0;
		content: "";
    color: 0;
		width: 50px;
		height: 1.4em;
		background: linear-gradient(to right, rgba($fade-color, 0) 0%,rgba($fade-color, 1) 85%);
	}
}