In this video you'll learn how to create read more / read less button with CSS only (without javascript). Other names for this button is expand/collapse, show more / show less.

Also, we'll add three dots at the end of the truncated text, enhancing the user experience.

Moreover, we'll add a smooth transition for text opening and closing with the brand new 2024 experimental calc-size() function that allows you to animate from a specific height to 'auto' value.

Useful resources:
CSS lh unit: [ Ссылка ]
Truncate text (three dots): [ Ссылка ]
calc-size() feature in Chrome: [ Ссылка ]

Subscribe for more videos like this: [ Ссылка ]

Let's connect:
Website: [ Ссылка ]
Blog: [ Ссылка ]
Instagram: [ Ссылка ]
Telegram: t.me/@Vladislav_Degtyarenko

#frontend #css #html #ux #webdev #tutorial

свернуть