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.md
View File

@ -5,6 +5,12 @@ tags: layout,beginner
If the text is longer than one line, it will be truncated and end with an ellipsis `…`.
- `overflow: hidden` prevents the text from overflowing its dimensions (for a block, 100% width and auto height).
- `white-space: nowrap` prevents the text from exceeding one line in height.
- `text-overflow: ellipsis` makes it so that if the text exceeds its dimensions, it will end with an ellipsis.
- `width: 200px;` ensures the element has a dimension, to know when to get ellipsis
- Only works for single line elements.
```html
<p class="truncate-text">If I exceed one line's width, I will be truncated.</p>
```
@ -17,11 +23,3 @@ If the text is longer than one line, it will be truncated and end with an ellips
width: 200px;
}
```
#### Explanation
- `overflow: hidden` prevents the text from overflowing its dimensions (for a block, 100% width and auto height).
- `white-space: nowrap` prevents the text from exceeding one line in height.
- `text-overflow: ellipsis` makes it so that if the text exceeds its dimensions, it will end with an ellipsis.
- `width: 200px;` ensures the element has a dimension, to know when to get ellipsis
- Only works for single line elements.