Multiline Text truncation

components/01_Layouts/contentCrop/_contentCrop.scss

@@ -28,39 +28,84 @@
     }
 }
 
-@mixin RV-ContentCrop{
-	&,* {
+@mixin RV-ContentCrop($-line-height: 1.1, $-prefix: '&') {
+
+    // Heuristic, just to be safe
+    $-line-height: $-line-height * 1.1;
+    $-background-color: white;
+    display: block;
     overflow: hidden;
-		word-break: break-all;
+
+    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;
+    }
+
+    &--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;
+        }
+    }
+
+    &--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;
+        }
     }
 
     img {
         width: 100%;
         height: 100%;
         object-fit: cover;
+        display: block;
     }
 
-	&--left {
+    #{$-prefix}--left {
         @include RV-ContentCrop--left;
     }
 
-	&--center {
+    #{$-prefix}--center {
         @include RV-ContentCrop--center;
     }
 
-	&--top {
+    #{$-prefix}--top {
         @include RV-ContentCrop--top;
     }
 
-	&--bottom {
+    #{$-prefix}--bottom {
         @include RV-ContentCrop--bottom;
     }
 
-	&--center {
+    #{$-prefix}--center {
         @include RV-ContentCrop--center;
     }
 }
 
-.RV-ContentCrop__Container {
+.RV-ContentCrop {
     @include RV-ContentCrop;
 }