Troncatore di testo

Cosa significa veramente «un carattere»

Un utente vede un «carattere» dove JavaScript vede tre valori. La stringa «👨‍👩‍👧‍👦» (emoji famiglia di quattro) è un cluster di grafemi, sette code point Unicode uniti da Zero-Width Joiners (U+200D), e undici unità di codice UTF-16. Ecco perché in JavaScript "👨‍👩‍👧‍👦".length === 11. La definizione autorevole vive nell'Unicode Standard Annex #29 «Unicode Text Segmentation» (versione corrente 15.0, settembre 2022), che specifica i confini dei cluster di grafemi, i confini delle parole e i confini delle frasi. JavaScript moderno espone UAX #29 attraverso Intl.Segmenter, standardizzato in ECMAScript 2022 e spedito in ogni browser dal Firefox 125 (aprile 2024); Chrome lo ha dalla versione 87 (novembre 2020) e Safari dalla 14.1 (aprile 2021). Usa new Intl.Segmenter('it', { granularity: 'grapheme' }) per contare come contano gli umani.

Limiti di caratteri sulle piattaforme su cui spedisci

• Meta descrizione Google Search: nessun limite imposto, ma lo snippet SERP tipicamente tronca a 155-160 caratteri su desktop e circa 120 su mobile. Dal 2018 le linee guida di Google enfatizzano che lo snippet può essere tratto da qualsiasi punto della pagina, non solo dal tag <meta name="description">.
• Twitter / X: 280 caratteri per account gratuiti da novembre 2017, 25 000 per X Premium da maggio 2023. Regole di conteggio speciali: qualsiasi URL conta come 23 caratteri indipendentemente dalla lunghezza, e i caratteri CJK contano come 2 ciascuno.
• SMS: 160 caratteri per messaggio nell'alfabeto GSM 7-bit (3GPP TS 23.038), 70 caratteri in UCS-2 (UTF-16) per testo non GSM inclusi la maggior parte di emoji e script non latini. SMS multi-parte usa 153 / 67 per parte perché lo User Data Header consuma 7 caratteri di payload.
• Descrizione Open Graph (Facebook): consigliato 110-200 caratteri, troncatura tipicamente a 300.
• Descrizione Twitter Card: 200 caratteri massimo, troncata con ellissi oltre.
• Post LinkedIn: 3 000 caratteri totali, ma la troncatura «visualizza altro» si attiva a circa 210 caratteri su desktop.
• Corpo notifica Web Push: nessun limite formale, ma iOS tronca a circa 110 caratteri e Android mostra circa 200.
• Database VARCHAR(N): in MySQL con collation utf8 legacy, N è byte; con utf8mb4, N è caratteri. PostgreSQL varchar(N) è sempre caratteri.

I confini di parola non sono solo split(' ')

Il troncatore ingenuo di confine di parola divide l'input su /\s+/ e taglia prima della prima parola che ti spinge oltre il limite. Funziona per l'inglese. Fallisce su cinese, giapponese, coreano e tailandese, nessuno dei quali usa spazi tra le parole: l'intero input finisce come una singola «parola», quindi il trimmer o tiene tutto o taglia tutto. L'arabo usa spazi ma unisce le forme delle lettere in modi che cambiano le posizioni dei confini. Intl.Segmenter con granularity: 'word' applica l'algoritmo di confine di parola UAX #29 e produce tagli corretti per ogni lingua. Distingue anche i segmenti «simili a parole» (restituiscono isWordLike: true) dai segmenti di punteggiatura e spazi, quindi puoi trovare l'ultimo confine di parola prima del tuo budget di caratteri con una sola passata sui segmenti.

Troncatura CSS: text-overflow e line-clamp

Se l'obiettivo è troncare visualmente mantenendo il testo completo nel DOM (così rimane disponibile per screen reader, motori di ricerca e copia-incolla), usa CSS. La troncatura a riga singola richiede tre proprietà insieme: overflow: hidden; white-space: nowrap; text-overflow: ellipsis;. text-overflow: ellipsis è definito nel CSS Basic User Interface Module Level 4 (W3C Candidate Recommendation agosto 2021) ed è stato spedito in ogni browser da Firefox 7 (settembre 2011); Internet Explorer 6 lo aveva già nell'agosto 2001. La troncatura multi-riga usa display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;. La proprietà -webkit-line-clamp risale a WebKit 2009 ed è ora definita nel CSS Overflow Module Level 3 (W3C Working Draft). Il line-clamp senza prefisso è spedito in Safari 18 (settembre 2024) e Firefox 125 (aprile 2024); includi sempre la forma -webkit- come fallback. Limitazione critica: la troncatura CSS è puramente presentazionale. Il testo completo è ancora nella sorgente HTML, quindi lo snippet SEO, il riepilogo email e l'indice di ricerca guidato da JS vedono tutti la stringa non troncata.

Errori comuni

• Usare str.length per i limiti. String.prototype.length di JavaScript restituisce unità di codice UTF-16, non caratteri. Uno status con tre emoji pollice in su «👍👍👍» riporta length === 6; Twitter lo conta come 3.
• Non sottrarre la lunghezza del suffisso. Se il tuo budget è 160 caratteri e aggiungi …, il tuo corpo di testo ha 159 caratteri con cui lavorare. Molte implementazioni ingenue producono stringhe oltre il limite.
• Dividere per spazi CJK e tailandese. Le lingue senza spazi tra parole diventano indivisibili. Usa Intl.Segmenter con granularity: 'word'.
• Tagliare prima di rimuovere la punteggiatura finale. «Ciao, mondo!» tagliato a 8 caratteri diventa ingenuamente «Ciao, m», o «Ciao,…» se intelligente, o «Ciao…» se ancora più intelligente e rimuove la virgola finale.
• Troncare all'interno di tag HTML. Troncare <a href="long-url">text</a> a 30 caratteri produce una stringa con un tag non chiuso. O rimuovi prima l'HTML o usa un troncatore consapevole del DOM.
• Tre punti vs un ellissi. L'ellissi Unicode … (U+2026) è un carattere, tre punti ... sono tre. Scegli quello giusto per il contatore di caratteri della piattaforma.
• Fidarsi di <input maxlength> per la validazione lato client. Lo HTML Living Standard conta unità di codice UTF-16, quindi un utente che incolla emoji vede un conteggio diverso dal tuo validatore backend consapevole di Unicode. Valida lato server.

Altre domande frequenti

Perché Twitter conta il mio URL come 23 caratteri anche quando è molto più lungo?

Twitter avvolge ogni URL attraverso il suo accorciatore t.co per analytics e rilevamento abusi, quindi fattura ogni URL alla lunghezza nel caso peggiore dell'accorciatore: 23 caratteri per HTTPS. Se scrivi un URL di 100 caratteri, conta come 23 nell'interfaccia di Twitter. La stessa regola si applica ai metadati Twitter Card. La libreria open-source twitter-text (Twitter, MIT) implementa la regola esatta se hai bisogno di simulazione perfetta al byte.

Questo strumento rispetta le lingue RTL come arabo ed ebraico?

Il contenuto testuale è preservato inclusi i suoi marcatori bidi (bidirezionali). La troncatura opera su caratteri in ordine logico, quindi tagliare una frase araba al carattere 100 taglia al 100esimo carattere logico (quello che uno screen reader annuncerebbe per primo). L'ordine di visualizzazione può invertirsi visivamente a causa del flusso da destra a sinistra, ma la stringa sottostante è coerente.

Perché il mio SMS troncato è ancora diviso in tre parti a 161 caratteri?

SMS usa la codifica GSM a 7 bit per testo solo latino, facendo entrare 160 caratteri in un segmento. Ma qualsiasi carattere fuori da GSM-7, incluse le virgolette curly «intelligenti» dell'autocorrezione (U+2018 / U+2019), l'ellissi Unicode (U+2026) o emoji, forza l'intero messaggio alla codifica UCS-2 a 70 caratteri per segmento. Se il tuo messaggio troncato di 160 caratteri contiene una virgoletta intelligente, l'operatore lo divide in tre parti UCS-2 di 70 caratteri. Sostituisci le virgolette intelligenti con virgolette ASCII per SMS.

Posso troncare testo formattato HTML senza rompere i tag?

Non in modo sicuro con un taglio che conta i caratteri. O rimuovi prima i tag HTML (via DOMParser o un parser lato server), tronca il testo semplice, poi opzionalmente ri-avvolgi; o usa un troncatore consapevole del DOM che cammina sull'albero dei nodi e clona i prefissi di interi nodi di testo. Regex puro sulla stringa HTML non è sicuro (HTML non è una lingua regolare).

Viene inviato qualcosa a un server?

No. Il testo che incolli, il limite che scegli, il suffisso che imposti e l'output troncato sono tutti elaborati nel JavaScript del tuo browser. Nessuna chiamata di rete viene effettuata e nessuna copia del tuo input viene memorizzata. Apri la scheda Rete in DevTools per verificare.