Add gradient fade

snippets/truncate-text-multiline.md

@@ -1,6 +1,6 @@
 ### Truncate text multiline
 
-If the text is longer than one line, it will be truncated for `n` lines and end with an ellipsis `…`.
+If the text is longer than one line, it will be truncated for `n` lines and end with an gradient fade.
 
 #### HTML
 
@@ -16,16 +16,23 @@ If the text is longer than one line, it will be truncated for `n` lines and end
 ```css
 .truncate-text-multiline {
   overflow: hidden;
-  text-overflow: ellipsis;
   display: block;
-  display: -webkit-box;
   height: 109.2px;
   margin: 0 auto;
   font-size: 26px;
   line-height: 1.4;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
   width: 400px;
+  position: relative;
+}
+
+.truncate-text-multiline:after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 150px;
+  height: 36.4px;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%);
 }
 ```
 
@@ -35,19 +42,13 @@ If the text is longer than one line, it will be truncated for `n` lines and end
 
 1. `overflow: hidden` prevents the text from overflowing its dimensions
    (for a block, 100% width and auto height).
-2. `text-overflow: ellipsis` makes it so that if the text exceeds its dimensions, it
+2. `width: 400px` ensures the element has a dimension.
-   will end with an ellipsis.
+3. `height: 109.2px` calculated value for height, it equals `font-size * line-height * numberOfLines` (in this case `26 * 1.4 * 3 = 109.2`)
-3. `width: 400px` ensures the element has a dimension, to know when to get ellipsis
+4. `height: 36.4px` calculated value for gradient container, it equals `font-size * line-height` (in this case `26 * 1.4 = 36.4`)
-4. `display: -webkit-box` attribute that allows to work with `line-clamp`
+5. `background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%)` gradient from `transparent` to `#f5f6f9`
-5. `-webkit-line-clamp: 3` number of lines to be truncated (in this case there will be only 3 visible lines)
-6. `-webkit-box-orient: horizontal` specify that text will go vertically
-7. `display: block` fallback for unsupported browsers
-8. `height: 109.2px` fallback, calculated value for height, it equals `font-size * line-height * numberOfLines` (in this case `26 * 1.4 * 3 = 109.2`)
 
 #### Browser support
 
-<span class="snippet__support-note">⚠️ Requires prefix for full support.</span>
+<span class="snippet__support-note">✅ No caveats.</span>
-
-- https://caniuse.com/#feat=css-line-clamp
 
 <!-- tags: layout -->