@mixin ellipsis($lines: 1, $line-height: 0) {
  overflow: hidden;

  @if $lines == 1 {
    @if $legacy-ie <= 8 {
      word-wrap: normal; // for ie
    }

    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    display: flexbox;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;

    @if value-of($line-height) == 0 {
      @error 'line-height is required when clamp muti lines';
    }

    @if unitless($line-height) or unit($line-height) == '%' {
      $line-height: value-of($line-height) * 1em;
    }

    max-height: $line-height * $lines;

    // &:after {
    //   content: " ...";
    // }
  }
}
