Smart Text Truncate

Elevate your content display with the Text Truncate component.

Elevate your content display with the Text Truncate component. This Framer component truncates long text while providing smooth Read More/Read Less functionality. Perfect for blog previews, product descriptions, testimonials, and any content that needs elegant truncation without sacrificing user experience. Key Features ✨ Dual Truncation Modes Truncate by line count (2, 3, 4+ lines) OR truncate by character limit (100, 150, 200+ characters) Toggle between modes instantly 🎨 Smooth Animations Expand/collapse with smooth transitions Customizable animation speed Multiple easing options Polish and professionalism built-in 📱 Fully Responsive Mobile-optimized by default Tablet and desktop perfect Adapts to container width 🎯 Customizable Text color, font, weight, size Truncation text ("Read More", "Show Less", custom text) Line height and spacing Perfect For Blog post previews and card components E-commerce product descriptions User testimonials and reviews FAQ sections with collapsible content Social media feeds and comments Article teasers and summaries Team bios and descriptions Any long-form text content What's Included Fully functional Framer component Responsive design system Component Specifications Truncate by lines (1-10 lines configurable) Truncate by characters (50-500 characters configurable) Custom "Read More" button text Custom "Read Less" button text Text Color (Configurable) Link Color (Configurable) Link Font (Configurable) Text Font (Configurable) How to Use 1. Add to Your Project: Drag the Text Truncate component into your Framer canvas 2. Configure Content: Add your text and set truncation mode (lines or characters) 3. Customize Appearance: Adjust colors, fonts, button text to match your design 4. Set Animation: Choose animation speed and easing preference 5. Deploy: Ready to use in published projects immediately