[CSS] 글자 수 제한 및 잘린 글자 … 으로 마무리 처리

  • 단일라인 처리
.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(최대 줄 수, 한 줄 높이); 
}

Leave a Comment