1. 한 줄
.desc {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all;
}
overflow: hidden;:박스에서 넘쳐난 텍스트 숨기기
white-space: nowrap;:줄바꿈이 없어짐
text-overflow: ellipsis;:... 말줄임 효과
word-break: break-all;:어절이 유지되지 않고 끊어져서 줄바꿈 됨
2. 여러 줄
.desc {
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
word-break: keep-all; // 문단으로 끊어져서 줄바꿈 됨
}
-webkit-line-clamp:글의 최대 라인수를 결정
- -webkit은 크로스브라우징을 위해 필요
구글, 사파리 브라우저에서 사용 가능.
