Multiline Text truncation

components/01_Layouts/contentCrop/_contentCrop.scss

@@ -1,66 +1,111 @@
 @mixin RV-ContentCrop--bottom {
-	img {
-		object-position: botom;
-	}
+    img {
+        object-position: botom;
+    }
 }
 
 @mixin RV-ContentCrop--top {
-	img {
-		object-position: top;
-	}
+    img {
+        object-position: top;
+    }
 }
 
 @mixin RV-ContentCrop--right {
-	img {
-		object-position: right;
-	}
+    img {
+        object-position: right;
+    }
 }
 
 @mixin RV-ContentCrop--left {
-	img {
-		object-position: left;
-	}
+    img {
+        object-position: left;
+    }
 }
 
 @mixin RV-ContentCrop--center {
-	img {
-		object-position: center;
-	}
+    img {
+        object-position: center;
+    }
 }
 
-@mixin RV-ContentCrop{
-	&,* {
-		overflow: hidden;
-		word-break: break-all;
-	}
+@mixin RV-ContentCrop($-line-height: 1.1, $-prefix: '&') {
 
-	img {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-	}
+    // Heuristic, just to be safe
+    $-line-height: $-line-height * 1.1;
+    $-background-color: white;
+    display: block;
+    overflow: hidden;
 
-	&--left {
-		@include RV-ContentCrop--left;
-	}
+    p {
+        overflow: hidden;
+        display: block;
+        text-overflow: ellipsis;
+        padding: 0;
+        margin: 0;
+        line-height: #{$-line-height};
+        // Determining the max line count and caclulating the height
+        z-index: -20;
+        position: relative;
+        background-color: #{$-background-color};
+        height: floor(100% / $-line-height / 16) * $-line-height * 16;
+    }
 
-	&--center {
-		@include RV-ContentCrop--center;
-	}
+    &--fade {
+        &:after {
+            background: linear-gradient(180deg, rgba(255, 255, 255, 0), #{$-background-color});
+            display: block;
+            content: ' ';
+            opacity: 0.8;
+            position: relative;
+            top: -25%;
+            width: 100%;
+            height: 25%;
+            z-index: -10;
+        }
+    }
 
-	&--top {
-		@include RV-ContentCrop--top;
-	}
+    &--ellipsis {
+        &:after {
+            position: relative;
+            display: block;
+            bottom: 1.2em;
+            left: calc(100% - 3ch);
+            content: '...';
+            font-size: 1.2em;
+            min-width: 2em;
+            background-color: $-background-color;
+            padding: 0 2px;
+        }
+    }
 
-	&--bottom {
-		@include RV-ContentCrop--bottom;
-	}
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+    }
 
-	&--center {
-		@include RV-ContentCrop--center;
-	}
+    #{$-prefix}--left {
+        @include RV-ContentCrop--left;
+    }
+
+    #{$-prefix}--center {
+        @include RV-ContentCrop--center;
+    }
+
+    #{$-prefix}--top {
+        @include RV-ContentCrop--top;
+    }
+
+    #{$-prefix}--bottom {
+        @include RV-ContentCrop--bottom;
+    }
+
+    #{$-prefix}--center {
+        @include RV-ContentCrop--center;
+    }
 }
 
-.RV-ContentCrop__Container {
-	@include RV-ContentCrop;
+.RV-ContentCrop {
+    @include RV-ContentCrop;
 }