CSS 한줄, 여러줄 말줄임 표시하기

실무에서 자주 사용하는 CSS 말줄임(...) 표시하는 방법에 대해 알아봅시다.

 

한 줄

.text {
    text-overflow: ellipsis;
    white-space:nowrap;
    overflow:hidden;
}

여러 줄

예를 들어 3줄 이상 말줄임 처리를 하고 싶다면 3줄에 해당하는 높이를 height 값으로 넣고, -webkit-line-clamp에 라인 수를 넣으면 됩니다.

참고로 IE에서는 말줄임(...) 표시는 안되고, 설정한 라인 수 이상일 경우 숨김 처리됩니다.

.box {
    display: -webkit-box;
    height: 60px;
    word-wrap: break-word;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}