How To Create Read More Read Less Button with CSS Only

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: css-tricks.com...
Truncate text (three dots): css-tricks.com...
calc-size() feature in Chrome: chromestatus.c...
Subscribe for more videos like this: / @vladyslavdihtiarenko
Let's connect:
Website: www.vd-develop...
Blog: www.vd-develop...
Instagram: / vladislavdegtyarenko
Telegram: t.me/@Vladislav_Degtyarenko
#frontend #css #html #ux #webdev #tutorial

[@Nevlogeos]

Super useful tutorial, thank you for making this and explaining everything so clearly! Hope you have a great day!

[@VladyslavDihtiarenko]

Glad it helpful!

[@ArmanAmraei]

css is amazing

[@VladyslavDihtiarenko]

Indeed! I love CSS.

[@markovvoz8849]

I don't like css but this is very nice, 0 javascript and functionality is there. I love it and hate it at the same time.

[@VladyslavDihtiarenko]

CSS is cool :)