[SCSS] ... 처리하기 css 말줄임 ellipsis mixin

ellipsis 말줄임 처리는, 자주 사용하는 믹스인이라 미리 만들어두면좋다.

@mixin ellipsis($line: 1) {
  @if ($line == 1) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word; // 공백 없을때 글자 짤림 방지
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $line;
  }
}

기본값은 1로 두고,
변수를 입력해주면 line-clamp에 들어간다.
* 컨테이너의 width값이 정해져있어야한다.

사용법

 p {
    width:100%;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 4px;
    @include ellipsis(3);
  }