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

Text Ellipsis Effect

Dereksiu.com.au - Derek Siu Headshot smiling

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>
Copy Code
How Did You Find This Tutorial?
Ready to implement this tutorial?
Get started with Webflow Today!
Webflow Icon Logo
Signup For A Free Webflow Account
Stay updated with my Newsletter!
Have Any Further Questions?
Contact Me
Basic Linkedin Icon
Basic Pinterest Icon
Basiic Maill iicon