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
Arkdezin Studio
