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

Update format

Browse Source
This commit is contained in:
Angelos Chalaris
2020-04-30 13:21:04 +03:00
parent d9fd2d23c3
commit 2fbd3e0737
55 changed files with 412 additions and 571 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,12 @@ tags: layout,intermediate
If the text is longer than one line, it will be truncated for `n` lines and end with an gradient fade.
- `overflow: hidden` prevents the text from overflowing its dimensions (for a block, 100% width and auto height).
- `width: 400px` ensures the element has a dimension.
- `height: 109.2px` calculated value for height, it equals `font-size * line-height * numberOfLines` (in this case `26 * 1.4 * 3 = 109.2`).
- `height: 36.4px` calculated value for gradient container, it equals `font-size * line-height` (in this case `26 * 1.4 = 36.4`).
- `background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%)` gradient from `transparent` to `#f5f6f9`.
```html
<p class="truncate-text-multiline">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
@ -34,11 +40,3 @@ If the text is longer than one line, it will be truncated for `n` lines and end
background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%);
}
```
#### Explanation
- `overflow: hidden` prevents the text from overflowing its dimensions (for a block, 100% width and auto height).
- `width: 400px` ensures the element has a dimension.
- `height: 109.2px` calculated value for height, it equals `font-size * line-height * numberOfLines` (in this case `26 * 1.4 * 3 = 109.2`)
- `height: 36.4px` calculated value for gradient container, it equals `font-size * line-height` (in this case `26 * 1.4 = 36.4`)
- `background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%)` gradient from `transparent` to `#f5f6f9`