Snippet'larım

How to truncate texts in multiple lines with SCSS?

Tem 18, 2024 #snippet
---
1 min
1
@mixin truncate-lines($line-count, $breakType: word) {
2
  overflow: hidden;
3
  text-overflow: ellipsis;
4
  display: -webkit-box;
5
  -webkit-box-orient: vertical;
6
  -webkit-line-clamp: $line-count;
7
  white-space: pre-wrap;
8

9
  @if $breakType =="word" {
10
    word-break: break-word;
11
  }
12

13
  @else if $breakType =="letter" {
14
    word-break: break-all;
15
  }
16

17
  @else {
18
    @error "Unknown break type #{$breakType}.";
19
  }
20
}

Kullanım:

1
@include truncate-lines(2, "letter")