src/styles/_truncatable-part.component.scss
@mixin clamp($lines, $bg, $size-factor: 1, $line-height: $line-height-base) {
  $height: $line-height * $font-size-base * $size-factor;
  &.fixedHeight {
    height: $lines * $height;
  }
  .content {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

}

@mixin min($lines, $size-factor: 1, $line-height: $line-height-base) {
  $height: $line-height * $font-size-base * $size-factor;
  min-height: $lines * $height;
}

$h4-factor: strip-unit($h4-font-size);

@mixin clamp-with-titles($i, $bg) {
  transition: height 1s;
  @include clamp($i, $bg);
  &.title {
    @include clamp($i, $bg, 1.25);
  }
  &.h4 {
    @include clamp($i, $bg, $h4-factor, $headings-line-height);
  }
}

@for $i from 1 through 15 {
  .clamp-default-#{$i} {
    @include clamp-with-titles($i, $body-bg);
  }
  :focus .clamp-default-#{$i},
  .ds-hover .clamp-default-#{$i} {
    @include clamp-with-titles($i, $list-group-hover-bg);
  }

  .clamp-primary-#{$i} {
    @include clamp-with-titles($i, $primary);
  }

  :focus .clamp-primary-#{$i},
  .ds-hover .clamp-primary-#{$i} {
    @include clamp-with-titles($i, darken($primary, 10%));
  }

  .clamp-light-#{$i} {
    @include clamp-with-titles($i, $light);
  }

  :focus .clamp-light-#{$i},
  .ds-hover .clamp-light-#{$i} {
    @include clamp-with-titles($i, darken($light, 10%));
  }
}

.clamp-none {
  overflow: hidden;
  @for $i from 1 through 15 {
    &.fixedHeight.min-#{$i} {
      transition: height 1s;
      @include min($i);
      &.title {
        @include min($i, 1.25);
      }
      &.h4 {
        @include min($i, $h4-factor, $headings-line-height);
      }
    }
  }
}
