text-ellipsis()

텍스트 생략(Ellipsis) 믹스인

용도

텍스트가 설정된 길이보다 넘칠 정도로 길 경우, 생략할 때 사용하는 믹스인입니다.

사용법

text-ellipsis() 믹스인에 설정 가능한 값을 리스트로 전달합니다.

text-ellipsis($width:number, $hover-visible:bool)

.usage {
  @include text-ellipsis(em(520), true);
}

매개변수(parameter)	유형(type)	필수(required)	기본 값(default)
$width	number		em(480)
$hover-visible	bool		false

위 예시 코드는 아래의 CSS로 컴파일 되어 출력됩니다.

.usage {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 32.5em;
}

.usage:hover {
  overflow: visible;
}

로직

text() 믹스인은 다음의 로직에 의해 작성되었습니다.

@mixin text-ellipsis($width: em(480), $hover-visible: false) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: unitless-px($width);
  
  @if $hover-visible {
    &:hover {
      overflow: visible;
    }
  }
}

1. 전달 받은 인자가 존재할 경우, 각 인자의 값을 설정

2. $hover-visible 값이 true일 경우, 요소에 마우스가 올라갔을 때 생략된 텍스트 모두 표시 설정

참고

믹스인에 사용된 Sass의 빌트인 모듈은 다음과 같습니다.

• @mixin / @include

• @if / @else

믹스인에 사용된 자체 제작 모듈은 다음과 같습니다.

• unitless-px()