- 단일라인 처리
.elemClass {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
- 멀티라인 처리
@mixin cutMultiLines($lineCnt, $lineHeight) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: $lineCnt; // 최대 줄 수
-webkit-box-orient: vertical;
word-wrap: break-word;
line-height: $lineHeight;
height: $lineHeight * $lineCnt;
}
.elemClass {
@include cutMultiLines(최대 줄 수, 한 줄 높이);
}