Truncador de texto

O que «um caractere» realmente significa

Um usuário vê um «caractere» onde JavaScript vê três valores. A string «👨‍👩‍👧‍👦» (emoji família de quatro) é um cluster de grafemas, sete pontos de código Unicode unidos por Zero-Width Joiners (U+200D), e onze unidades de código UTF-16. É por isso que "👨‍👩‍👧‍👦".length === 11 em JavaScript. A definição autoritativa vive no Anexo Padrão Unicode #29 «Segmentação de Texto Unicode» (versão atual 15.0, setembro de 2022), que especifica limites de cluster de grafemas, limites de palavras e limites de sentenças. JavaScript moderno expõe UAX #29 através de Intl.Segmenter, padronizado em ECMAScript 2022 e enviado em todo navegador desde Firefox 125 (abril de 2024); Chrome o tem desde a versão 87 (novembro de 2020) e Safari desde 14.1 (abril de 2021). Use new Intl.Segmenter('pt', { granularity: 'grapheme' }) para contar como humanos contam.

Limites de caracteres nas plataformas para as quais você entrega

• Meta descrição do Google Search: sem limite imposto, mas o snippet SERP tipicamente trunca em 155-160 caracteres no desktop e cerca de 120 no mobile. Desde 2018, as próprias diretrizes do Google enfatizam que o snippet pode ser extraído de qualquer parte da página, não apenas da tag <meta name="description">.
• Twitter / X: 280 caracteres para contas gratuitas desde novembro de 2017, 25 000 para X Premium desde maio de 2023. Regras especiais de contagem: qualquer URL conta como 23 caracteres independentemente do comprimento, e caracteres CJK contam como 2 cada.
• SMS: 160 caracteres por mensagem no alfabeto 7-bit GSM (3GPP TS 23.038), 70 caracteres em UCS-2 (UTF-16) para texto não-GSM incluindo a maioria dos emojis e scripts não-latinos. SMS multi-partes usa 153 / 67 por parte porque o User Data Header consome 7 caracteres de carga útil.
• Descrição Open Graph (Facebook): recomendado 110-200 caracteres, truncamento tipicamente em 300.
• Descrição Twitter Card: 200 caracteres máximo, truncada com elipse além disso.
• Post do LinkedIn: 3 000 caracteres no total, mas o truncamento «ver mais» dispara em cerca de 210 caracteres no desktop.
• Corpo de notificação Web Push: sem limite formal, mas iOS trunca em cerca de 110 caracteres e Android mostra cerca de 200.
• Banco de dados VARCHAR(N): em MySQL com colação utf8 legada, N é bytes; com utf8mb4, N é caracteres. PostgreSQL varchar(N) é sempre caracteres.

Limites de palavras não são apenas split(' ')

O truncador ingênuo de limite de palavras divide a entrada em /\s+/ e corta antes da primeira palavra que o coloca acima do limite. Isso funciona para inglês. Falha em chinês, japonês, coreano e tailandês, nenhum usa espaços entre palavras: toda a entrada acaba como uma única «palavra», então o aparador ou mantém tudo ou corta tudo. O árabe usa espaços mas une formas de letras de maneiras que mudam as posições de limite. Intl.Segmenter com granularity: 'word' aplica o algoritmo de limite de palavras UAX #29 e produz cortes corretos para cada idioma. Também distingue segmentos «semelhantes a palavras» (retornam isWordLike: true) de segmentos de pontuação e espaços, então você pode encontrar o último limite de palavra antes do seu orçamento de caracteres com uma única passagem sobre os segmentos.

Truncamento CSS: text-overflow e line-clamp

Se o objetivo é truncar visualmente mantendo o texto completo no DOM (para que permaneça disponível para leitores de tela, motores de busca e copiar-colar), use CSS. O truncamento de linha única requer três propriedades juntas: overflow: hidden; white-space: nowrap; text-overflow: ellipsis;. text-overflow: ellipsis é definido no Módulo CSS Basic User Interface Nível 4 (Candidate Recommendation W3C agosto de 2021) e foi enviado em todo navegador desde Firefox 7 (setembro de 2011); Internet Explorer 6 o tinha já em agosto de 2001. O truncamento multilinha usa display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;. A propriedade -webkit-line-clamp data de WebKit 2009 e agora é definida no Módulo CSS Overflow Nível 3 (Working Draft W3C). O line-clamp sem prefixo é enviado no Safari 18 (setembro de 2024) e Firefox 125 (abril de 2024); sempre inclua a forma -webkit- como fallback. Limitação crítica: o truncamento CSS é puramente apresentacional. O texto completo ainda está no código HTML, então o snippet SEO, o resumo de e-mail e o índice de busca movido por JS veem a string não truncada.

Erros comuns

• Usar str.length para os limites. String.prototype.length do JavaScript retorna unidades de código UTF-16, não caracteres. Um status com três emojis de polegar para cima «👍👍👍» reporta length === 6; Twitter conta como 3.
• Não subtrair o comprimento do sufixo. Se seu orçamento é de 160 caracteres e você adiciona …, seu corpo de texto tem 159 caracteres para trabalhar. Muitas implementações ingênuas produzem strings acima do limite.
• Dividir por espaços CJK e tailandês. Idiomas sem espaços entre palavras tornam-se indivisíveis. Use Intl.Segmenter com granularity: 'word'.
• Cortar antes de remover a pontuação final. «Olá, mundo!» aparado a 8 caracteres torna-se «Olá, m» ingenuamente, ou «Olá,…» se inteligente, ou «Olá…» se ainda mais inteligente e remove a vírgula final.
• Truncar dentro de tags HTML. Truncar <a href="long-url">text</a> a 30 caracteres produz uma string com uma tag não fechada. Ou remova HTML primeiro ou use um truncador consciente do DOM.
• Três pontos vs uma elipse. A elipse Unicode … (U+2026) é um caractere, três pontos ... são três. Escolha o certo para o contador de caracteres da plataforma.
• Confiar em <input maxlength> para validação do lado do cliente. O HTML Living Standard conta unidades de código UTF-16, então um usuário colando emojis vê uma contagem diferente do seu validador backend consciente de Unicode. Valide do lado do servidor.

Mais perguntas frequentes

Por que o Twitter conta minha URL como 23 caracteres mesmo quando é muito mais longa?

O Twitter envolve cada URL através do seu encurtador t.co para análise e detecção de abuso, então cobra cada URL no comprimento do pior caso do encurtador: 23 caracteres para HTTPS. Se você escreve uma URL de 100 caracteres, conta como 23 na interface do Twitter. A mesma regra se aplica aos metadados Twitter Card. A biblioteca open-source twitter-text (Twitter, MIT) implementa a regra exata se você precisar de simulação perfeita ao byte.

Esta ferramenta respeita idiomas RTL como árabe e hebraico?

O conteúdo de texto é preservado incluindo seus marcadores bidi (bidirecionais). O truncamento opera em caracteres em ordem lógica, então cortar uma frase em árabe no caractere 100 corta no 100º caractere lógico (aquele que um leitor de tela anunciaria primeiro). A ordem de exibição pode reverter visualmente devido ao fluxo da direita para a esquerda, mas a string subjacente é consistente.

Por que meu SMS truncado ainda é dividido em três partes em 161 caracteres?

SMS usa codificação 7-bit GSM para texto somente latino, encaixando 160 caracteres em um segmento. Mas qualquer caractere fora de GSM-7, incluindo as aspas tipográficas «inteligentes» da autocorreção (U+2018 / U+2019), a elipse Unicode (U+2026), ou emojis, força toda a mensagem para codificação UCS-2 a 70 caracteres por segmento. Se sua mensagem truncada de 160 caracteres contém uma aspa tipográfica, a operadora a divide em três partes UCS-2 de 70 caracteres. Substitua aspas tipográficas por aspas ASCII para SMS.

Posso truncar texto formatado em HTML sem quebrar as tags?

Não com segurança com um corte contando caracteres. Ou remova as tags HTML primeiro (via DOMParser ou um parser do lado do servidor), trunque o texto simples, então opcionalmente reenvolva; ou use um truncador consciente do DOM que percorra a árvore de nós e clone prefixos de nós de texto inteiros. Regex puro sobre a string HTML não é seguro (HTML não é uma linguagem regular).

Algo é enviado a um servidor?

Não. O texto que você cola, o limite que você escolhe, o sufixo que você define e a saída truncada são todos processados no JavaScript do seu navegador. Nenhuma chamada de rede é feita e nenhuma cópia da sua entrada é armazenada. Abra a aba Rede no DevTools para verificar.