[css] 말줄임 여러 줄 예시

여러 줄 말줄임을 사용할 경우

 

한 줄 말줄임에서 사용하는 "display" 속성 변경 및 "white-space: nowrap"을 삭제하고,

 

"-webkit-line-clamp"와 "-webkit-box-orient"를 사용하면 된다.

 

 

예시 코드

/* 한 줄 말줄임 */
.single-line-ellipsis{
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* 여러 줄 말줄임 */
.multi-line-ellipsis{
    display: -webkit-box;
    overflow: hidden;
    max-height: 3em;
    line-height: 1.5;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}