Cacher is the code snippet organizer for pro developers

<div class="webkitlineclamp">
  <div class="el">
    <h3 class="card__title">Bez premca: Novak Đoković osvojio Masters u Londonu</h3>
  </div>
</div>

.el {
  width: 150px;
}

html:not(.webkitlineclamp) .card__title:before {
  min-width: 30px;
  content: " \2026";
  position: absolute;
  right: 0;
  background: #fff;
}

html:not(.webkitlineclamp) .card__title:after {
  content: "                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 ";
  display: inline;
  letter-spacing: 1em;
  position: relative;
  z-index: 1;
  font-size: 75%;
}

.card__title {
  position: relative;
  overflow: hidden;
}

.webkitlineclamp .card__title {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html:not(.webkitlineclamp) .card__title {
  max-height: 30px;
  max-height: 3rem;
}

html:not(.webkitlineclamp) .card__title:before {
  top: 15px;
  top: 1.5rem;
  color: #000;
}

html:not(.webkitlineclamp) .card__title:after {
  background: #fff;
}

// ----
// libsass (v3.3.2)
// ----

.el {
  width: 150px;
}

@mixin line-clamp($maxLines:2, $lineHeight:15, $fgCol:#000, $bgCol:#fff) {
    position: relative;
    overflow: hidden;

    .webkitlineclamp & {
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: $maxLines;
    }

    html:not(.webkitlineclamp) & {
        max-height: $maxLines * $lineHeight * 1px;
        max-height: $maxLines * $lineHeight / 10 * 1rem;

        &:before {
            top: ($maxLines - 1) * $lineHeight * 1px;
            top: ($maxLines - 1) * $lineHeight / 10 * 1rem;
            @extend %line-clamp-ellipsis;
            color: $fgCol;
        }

        &:after {
            @extend %line-clamp-filler;
            background: $bgCol;
        }
    }
}

%line-clamp-ellipsis {
    min-width: 30px;
    content: " \2026";
    position: absolute;
    right: 0;
    background: #fff;
}

%line-clamp-filler {
    $whitespace: " ";
    @for $i from 1 through 1024 {
        $whitespace: $whitespace + "  ";
    }
    content: $whitespace;
    display: inline;
    letter-spacing: 1em;
    position: relative;
    z-index: 1;
    font-size: 75%;
};

.card__title {
  @include line-clamp (2)
}

<div class="webkitlineclamp">
  <div class="el">
    <h3 class="card__title">Bez premca: Novak Đoković osvojio Masters u Londonu</h3>
  </div>
</div>