> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/scss-mixins/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/scss-mixins/mixins/text/text-ellipsis.md).

# text-ellipsis()

텍스트 생략(Ellipsis) 믹스인

## 용도 <a href="#use" id="use"></a>

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

## 사용법 <a href="#usage" id="usage"></a>

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

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

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

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

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

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

.usage:hover {
  overflow: visible;
}
```

## 로직 <a href="#logic" id="logic"></a>

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

```javascript
@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`일 경우, 요소에 마우스가 올라갔을 때 생략된 텍스트 모두 표시 설정

## 참고 <a href="#reference" id="reference"></a>

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

* [@mixin / @include](https://sass-lang.com/documentation/at-rules/mixin)
* [@if / @else](https://sass-lang.com/documentation/at-rules/control/if)&#x20;

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

* [unitless-px()](/scss-mixins/utilities/units/unitless-px.md)