CSS Ellipsis - Handling overflow and long text
► An ellipsis is a punctuation type represented by three dots, which signify a pause or an intentional omission of a word sentence or a whole section from some text.
We can create an ellipsis in CSS if we have text that is too long or in danger of overflowing its container.
While techniques like text wrapping, breaking and hyphenation offer similar ways to handle overflowing text, they could leave unsightly gaps of whitespace or break words in unsuitable places. In these scenarios, the ellipsis is a good alternative to manage overflow while showing that there is more to read.
► Timestamps:
0:00 Start
0:27 The ellipsis
0:52 Use of the ellipsis on social media platforms
2:16 How we implement the ellipsis with text-overflow
4:23 Making hidden text viewable on hover
5:21 End
► Get the code:
CodePen Start: https://codepen.io/craigabourne/pen/W...
CodePen End: https://codepen.io/craigabourne/pen/N...
► Links used in the video:
Text overflow with CSS Ellipsis: https://developer.mozilla.org/en-US/d...
CSS Text Wrapping, Breaking & Hyphens: • CSS Text Wrapping, Breaking & Hyphens
► This video is part of the CSS for Absolute Beginners playlist: • CSS for Absolute Beginners
► Social Media:
/ craigabourne
/ craigabourne
► Code & Projects:
https://github.com/craigabourne
https://codepen.io/craigabourne
Watch video CSS Ellipsis - Handling overflow and long text online without registration, duration hours minute second in high quality. This video was added by user Craig A. Bourne 01 January 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 2,113 once and liked it 114 people.