andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add gradient fade

Browse Source
This commit is contained in:
Telegin
2019-01-28 12:03:47 +06:00
parent 3614f48f09
commit 7dedbf4910
1 changed files with 17 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
snippets/truncate-text-multiline.md
View File

@ -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
will end with an ellipsis.
3. `width: 400px` ensures the element has a dimension, to know when to get ellipsis
4. `display: -webkit-box` attribute that allows to work with `line-clamp`
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`)
2. `width: 400px` ensures the element has a dimension.
3. `height: 109.2px` calculated value for height, it equals `font-size * line-height * numberOfLines` (in this case `26 * 1.4 * 3 = 109.2`)
4. `height: 36.4px` calculated value for gradient container, it equals `font-size * line-height` (in this case `26 * 1.4 = 36.4`)
5. `background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%)` gradient from `transparent` to `#f5f6f9`
#### Browser support
<span class="snippet__support-note">⚠️ Requires prefix for full support.</span>
- https://caniuse.com/#feat=css-line-clamp
<span class="snippet__support-note">✅ No caveats.</span>
<!-- tags: layout -->