5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3jpuro209qqra.js","/creators-assets/_next/static/immutable/chunks/077g_l9cwe8hz.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/2ouyrs2yz196q.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3orcs6a8eyfvz.js","/creators-assets/_next/static/immutable/chunks/3-tcb9ouhlqkm.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/120zfy8hqrcwf.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/1p31g3z3kho5v.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/2885u7skzba5_.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/1fo1h_o5odhhk.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v-er0xp5q011.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2rwbpl35w01v4.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/0djs9po3g19ek.js","/creators-assets/_next/static/immutable/chunks/1_ej2mmnwnp37.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2_qutx8yar-up.js","/creators-assets/_next/static/immutable/chunks/0bcmpcsc4ih7d.js"],"PostDetailCard"] 5d:Ta62,

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

59:[["$","$L5c",null,{"post":{"id":"019ab588-ed33-72f4-90ef-427cb66abd06","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"79254169-5dbb-4390-b832-9fa4ec7b8d9d","name":"Arkdezin Studio","slug":"arkdezin","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/830797/avatar-yuFf9UqFLP2iRPpqvXl6kqVXDpjNoL.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"7Ywpu6cq0OKU2doOhYbm","resolved":true,"title":"Smart Text Truncate","body":"$5d","bodyJson":null,"introduction":"","slug":"smart-text-truncate","author":{"framerUserId":"79254169-5dbb-4390-b832-9fa4ec7b8d9d","name":"Arkdezin Studio","slug":"arkdezin","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/830797/avatar-yuFf9UqFLP2iRPpqvXl6kqVXDpjNoL.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/7Ywpu6cq0OKU2doOhYbm/smart-text-truncate-yp02HXncAry7ngajZcKa9u8yP8e2vl"}],"post":null,"createdAt":"2025-10-24T11:37:14.944Z","updatedAt":"2025-11-24T10:49:32.231Z","publishedAt":"2025-11-24T11:04:01.075Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/SmartTextTruncate-9HAt.js@JPuF6Myl6xgjJf699YEv","previewUrl":"https://smart-text-truncate.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Typography","slug":"typography"}],"lastSaveId":"JPuF6Myl6xgjJf699YEv"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-11-24T11:04:01.075Z","updatedAt":"2025-11-24T11:04:01.075Z","reported":false}}],"$L5e"]

Suggested for you