How to truncate texts in multiple lines

Metinler her zaman ordan burdan taşarak beklenmedik UI bug’lara neden olur ve truncate etmek gerekir. Çok fazla yerde kullanılacağı için bir mixin kullanabilirsiniz.

@mixin truncate-lines($line-count, $breakType: word) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  white-space: pre-wrap;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line-count;

  @if $breakType =="word" {
    word-break: break-word;
  }

  @else if $breakType =="letter" {
    word-break: break-all
  }

  @else {
    @error "Unknown break type #{$breakType}.";
  }
}

.title {
  @include truncate-lines(2, "letter")
}

Mixin’in Less implementasyonu da aşağıdaki gibidir:

.truncate-lines(@lineCount; @breakType: "word") {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  white-space: pre-wrap;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @lineCount;

  & when (@breakType = "word") {
    word-break: break-word;
  }

  & when (@breakType = "letter") {
    word-break: break-all;
  }
}

.title {
  .truncate-lines(2, "letter");
}