[HTML/CSS] 웹킷 활용해서 줄 바꿈 없이 말줄임표(?) 표시..

.line-clamp
{
	display            : block;
	display            : -webkit-box;
	-webkit-box-orient : vertical;
	position           : relative;
 
	line-height        : 1.2;
	overflow           : hidden;
	text-overflow      : ellipsis;
	padding            : 0 !important;
}
.line-clamp:after
{
	content    : '...';
	text-align : right;
	bottom     : 0;
	right      : 0;
	width      : 25%;
	display    : block;
	position   : absolute;
	height     : calc(1em * 1.2);
	background : linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 75%);
}
@supports (-webkit-line-clamp: 1)
{
	.line-clamp:after
	{
		display : none !important;
	}
}
 
.line-clamp-5
{
	-webkit-line-clamp : 2;
	height             : calc(1em * 1.2 * 2);
}

.line-clamp{
	line-height        : 1.2;
}

이 부분 적당히 조절해가면서 사용