Back to tutorials
User / Level Icon
Intermediate
Gear Time Icon
Webflow
Time Icon
4
 Minutes

Text Ellipsis Effect

Derek Siu Author Headshot

Taught by:

Derek Siu

Sometimes in Websites specifically CMS items such as blog posts, the description is inconsistent in length leading to an imbalanced design (aesthetic / UI) one way to combat this is to use ellipsis. In this Webflow tutorial, learn how to add ellipsis to any text using custom code (please note at the time of posting this - you will need a paid Webflow hosting or account plan for this to work).


Custom Code Below:

<style>
.target {overflow: hidden; display: -webkit-box; webkit-line-clamp: 3; - webkit-box-orient: vertical;}
</style>
How Did You Find This Tutorial?
Ready to implement this tutorial?
Get started with Webflow Today!
Signup For A Free Webflow Account
Have Any Further Questions?
Contact Me
Derek Siu Teaching Code Weblow