Frontend/CSS
CSS - ellipsis(..., 말 줄임표) 처리
둉이
2021. 8. 19. 16:48
이건 쓸 때마다 까먹어서 정리를 해놔야겠다.. ㅜㅜ
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;
}
사실, 여러 줄을 처리하는 방법으로 한 줄도 처리할 수 있어서 귀찮으면 아래쪽 코드만 외워두고 사용하자!