Como Limitar Caracteres em Textos do CMS no Framer

ATUALIZAÇÃO 02/09/25: O Framer agora possui a propriedade Text Truncation de forma nativa, e este code override não é mais necessário.

—- ARTIGO ORIGINAL —--

Textos longos podem acabar quebrando seu layout, especialmente em seções como cards ou grids com títulos e descrições. Para evitar isso, enquanto o Framer ainda não oferece essa opção de forma nativa, você pode usar um code override simples que limita o número de caracteres de um campo de texto vindo do CMS - e ainda adicionar "…" no final para indicar que o conteúdo foi cortado.

Crie um novo arquivo

No seu projeto Framer, vá para a seção de "Code Overrides" e clique em "New File" para criar um novo arquivo de código.

Cole o código abaixo

Delete o conteúdo padrão e cole este código.

Você deve alterar o valor de limit para o número de caracteres desejado (50 é o padrão neste exemplo):

export function LimitarCaracteres(Component): ComponentType {
    return (props) => {
        const { text, ...otherProps } = props
        const limit = 50 // DEFINA AQUI O LIMITE DE CARACTERES

        // Verificar tamanho
        let trimmedText = text || ""

        if (text && text.length > limit) {
            // Cortar no limite
            trimmedText = text.slice(0, limit).trim()

            // Procurar último espaço para não cortar palavras
            const lastSpaceIndex = trimmedText.lastIndexOf(" ")
            if (lastSpaceIndex > limit * 0.8) {
                trimmedText = trimmedText.slice(0, lastSpaceIndex).trim()
            }

            // Adicionar reticências
            trimmedText += "..."
        }

        return <Component {...otherProps} text={trimmedText} />
    }
}

export function LimitarCaracteres(Component): ComponentType {
    return (props) => {
        const { text, ...otherProps } = props
        const limit = 50 // DEFINA AQUI O LIMITE DE CARACTERES

        // Verificar tamanho
        let trimmedText = text || ""

        if (text && text.length > limit) {
            // Cortar no limite
            trimmedText = text.slice(0, limit).trim()

            // Procurar último espaço para não cortar palavras
            const lastSpaceIndex = trimmedText.lastIndexOf(" ")
            if (lastSpaceIndex > limit * 0.8) {
                trimmedText = trimmedText.slice(0, lastSpaceIndex).trim()
            }

            // Adicionar reticências
            trimmedText += "..."
        }

        return <Component {...otherProps} text={trimmedText} />
    }
}

export function LimitarCaracteres(Component): ComponentType {
    return (props) => {
        const { text, ...otherProps } = props
        const limit = 50 // DEFINA AQUI O LIMITE DE CARACTERES

        // Verificar tamanho
        let trimmedText = text || ""

        if (text && text.length > limit) {
            // Cortar no limite
            trimmedText = text.slice(0, limit).trim()

            // Procurar último espaço para não cortar palavras
            const lastSpaceIndex = trimmedText.lastIndexOf(" ")
            if (lastSpaceIndex > limit * 0.8) {
                trimmedText = trimmedText.slice(0, lastSpaceIndex).trim()
            }

            // Adicionar reticências
            trimmedText += "..."
        }

        return <Component {...otherProps} text={trimmedText} />
    }
}

export function LimitarCaracteres(Component): ComponentType {
    return (props) => {
        const { text, ...otherProps } = props
        const limit = 50 // DEFINA AQUI O LIMITE DE CARACTERES

        // Verificar tamanho
        let trimmedText = text || ""

        if (text && text.length > limit) {
            // Cortar no limite
            trimmedText = text.slice(0, limit).trim()

            // Procurar último espaço para não cortar palavras
            const lastSpaceIndex = trimmedText.lastIndexOf(" ")
            if (lastSpaceIndex > limit * 0.8) {
                trimmedText = trimmedText.slice(0, lastSpaceIndex).trim()
            }

            // Adicionar reticências
            trimmedText += "..."
        }

        return <Component {...otherProps} text={trimmedText} />
    }
}

Aplique o override

Esse override funciona apenas com textos conectados ao CMS, então siga os passos abaixo:

1. Selecione a camada de texto que está conectada a um campo do CMS.

2. Vá para a aba "Code" > "Overrides".

3. Escolha o arquivo de código criado.

4. Aplique o override chamado "LimitarCaracteres".

Importante lembrar

Esse override só funciona quando o texto vem do CMS, então se você tentar aplicar em um texto normal, ele não terá efeito.

Além disso, dentro do editor o texto pode continuar aparecendo completo. A limitação será visível apenas na visualização do site ou ao publicar.

Com esse ajuste simples, você evita que textos longos atrapalhem seu layout e mantém seu design limpo e consistente. Se usar no seu projeto, me marca no Instagram pra eu ver!