[CSS] 2줄이상일때 "..." 처리

1.  -webkit-line-clamp

웹킷 기반의 브라우저일 경우 줄수를 설정해 그 이상 되었을때 "..." 처리가 되도록 설정 가능

div{ 
    display:-webkit-box;
    text-overflow:ellipsis;
    -webkit-line-clamp:2; /*라인수 설정*/
    word-wrap:break-word;
    -webkit-box-orient: vertical;
}

-webkit-line-clamp 는 "..."처리가 되는 라인수를 지정할 수 있습니다. 

이 외에, 웹킷기반의 브라우저가 아닐 경우를 대비하여 추가적으로 높이값과 hidden처리를 해줘야합니다.

div{ 
    display:-webkit-box;
    height:20px; /*높이값 추가*/
    overflow:hidden; /* 숨김처리 */
    text-overflow:ellipsis;
    -webkit-line-clamp:2;
    word-wrap:break-word;
    -webkit-box-orient: vertical;
}