CSS - ellipsis(..., 말 줄임표) 처리

이건 쓸 때마다 까먹어서 정리를 해놔야겠다.. ㅜㅜ

 

CSS를 이용하여 아래 사진처럼 ... 말 줄임 처리를 할 수 있다.

 

한 줄 elipsis 처리

.elipsis {
    display: block;  /* 이미 display: block인 요소에 적용할 경우 생략 가능 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
 }

 

여러 줄 elipsis 처리

.elipsis {
	height: 20px;  /* 높이를 꼭 지정해야 함 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 여기에 제한하고자 하는 줄 수를 입력한다. */
    -webkit-box-orient: vertical;
 }

 

사실, 여러 줄을 처리하는 방법으로 한 줄도 처리할 수 있어서 귀찮으면 아래쪽 코드만 외워두고 사용하자!