Smart Text Truncate

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