/* Begin required CSS. */
.line-clamp {
    display: block;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    position: relative;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 !important;
}


.line-clamp:after {
    content: '...';
    text-align: right;
    bottom: 0;
    right: 0;
    width: 25%;
    display: block;
    position: absolute;
    height: calc(1em * 1.2);
    /*background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%);  Fading muss auf aktuelle BackgroundColor gehen, sonst haben wir immer einen weißen Balken*/
}

@supports (-webkit-line-clamp: 1) {
    .line-clamp:after {
        display: none !important;
    }
}

    /*Mozilla all versions specific styling*/
    @-moz-document url-prefix() {
    .line-clamp:after {
        content: '';
    }
}
    /*IE 10+ specific styling*/
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .line-clamp:after {
        content: '';
    }
}
    .line-clamp-4-grid {
        -webkit-line-clamp: 4;
        max-height: calc(1em * 1.2 * 4);
        min-height: calc(1em * 1.2 * 4);
    }

    .line-clamp-1 {
        -webkit-line-clamp: 1;
        max-height: calc(1em * 1.2 * 1);
    }

    .line-clamp-2 {
        -webkit-line-clamp: 2;
        max-height: calc(1em * 1.2 * 2);
    }

    .line-clamp-3 {
        -webkit-line-clamp: 3;
        max-height: calc(1em * 1.2 * 3);
    }

    .line-clamp-4 {
        -webkit-line-clamp: 4;
        max-height: calc(1em * 1.2 * 4);
    }

    .line-clamp-5 {
        -webkit-line-clamp: 5;
        max-height: calc(1em * 1.2 * 5);
    }
/* End required CSS. */