---
title: "Smart Text Truncate — Free Framer component · Best of Framer"
description: "Free Framer component · by Arkdezin Studio · Typography. Elevate your content display with the Text Truncate component."
canonical: "https://framer.elliotli.dev/component/smart-text-truncate"
---

[Home](/)/[Components](/components)/[Typography](/components/category/typography)/Smart Text Truncate

# Smart Text Truncate

[View on Framer](https://framer.com/marketplace/components/smart-text-truncate/?via=elliot-li)

![Smart Text Truncate preview image 1](https://framer.elliotli.dev/og/component/smart-text-truncate/851efcf7fb28c752/1600x1200.jpg)

## Summary

Elevate your content display with the Text Truncate component.

## Description

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

## Rank history [How rankings work →](/terms#rankings)

-   All · #3517

## Details

- **Author**: Arkdezin Studio
- **Published**: 2025-11-24
- **Updated**: 2025-11-24
- **Added**: 2025-10-24
- **Categories**: Typography

## More like this

-   [glowing shimmer text](/component/glowing-shimmer-text) — Goutam Sarkar · Free — a typography template
-   [Skew Reveal Text](/component/skew-reveal-text) — Benjamin Michael Bremer · $1 — a typography template
-   [Marquee Scroll Text](/component/infinite-scroll-text) — Kai Studio · $10 — Tilted, seamless kinetic marquee text UI
-   [Clip Type Stagger](/component/clip-type-stagger) — Matheus Brandão · Free — Overview Clip Type Stagger is a premium typography architect designed to create the iconic "mask-reveal" effect used by top-tier digital…