CSS 말줄임 처리, 한줄/두줄/세줄...

.title{
	width: 100%;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

원리는
width값을 정해놓고 width: 100%;,
상자를 세로정렬 display: -webkit-box;-webkit-box-orient: vertical;,
넘어가는건 안보이게overflow: hidden;,
말줄임처리 text-overflow: ellipsis; 를 하는것이다.

한줄 :-webkit-line-clamp: 1;
두줄 :-webkit-line-clamp: 2;
세줄 : -webkit-line-clamp: 3;
이런식으로 바꿔주면된다.

자꾸 찾아보기 귀찮아서 정리해두기.