Troncateur de texte, gratuit

Ce que « un caractère » signifie vraiment

Un utilisateur voit un « caractère » là où JavaScript voit trois valeurs. La chaîne « 👨‍👩‍👧‍👦 » (emoji famille de quatre) est un cluster de graphèmes, sept points de code Unicode joints par des liaisons sans chasse Zero-Width Joiners (U+200D), et onze unités de code UTF-16. C'est pourquoi "👨‍👩‍👧‍👦".length === 11 en JavaScript. La définition faisant autorité vit dans l'Annexe Standard Unicode #29 « Segmentation de Texte Unicode » (version actuelle 15.0, septembre 2022), qui spécifie les limites de cluster de graphèmes, les limites de mots et les limites de phrases. JavaScript moderne expose UAX #29 via Intl.Segmenter, normalisé dans ECMAScript 2022 et livré dans chaque navigateur depuis Firefox 125 (avril 2024) ; Chrome l'a depuis la version 87 (novembre 2020) et Safari depuis 14.1 (avril 2021). Utilisez new Intl.Segmenter('fr', { granularity: 'grapheme' }) pour compter comme les humains comptent.

Limites de caractères sur les plateformes auxquelles vous livrez

• Méta-description Google Search : pas de plafond imposé, mais l'extrait SERP tronque généralement à 155-160 caractères sur desktop et environ 120 sur mobile. Depuis 2018, les propres directives de Google soulignent que l'extrait peut être tiré de n'importe où dans la page, pas seulement de la balise <meta name="description">.
• Twitter / X : 280 caractères pour les comptes gratuits depuis novembre 2017, 25 000 pour X Premium depuis mai 2023. Règles de comptage spéciales : toute URL compte pour 23 caractères quelle que soit sa longueur, et les caractères CJK comptent pour 2 chacun.
• SMS : 160 caractères par message dans l'alphabet 7-bit GSM (3GPP TS 23.038), 70 caractères en UCS-2 (UTF-16) pour le texte non-GSM incluant la plupart des emoji et les scripts non-latins. Les SMS multi-parties utilisent 153 / 67 par partie car l'en-tête User Data Header consomme 7 caractères de charge utile.
• Description Open Graph (Facebook) : recommandé 110-200 caractères, troncature généralement à 300.
• Description Twitter Card : 200 caractères maximum, tronquée avec ellipses au-delà.
• Post LinkedIn : 3 000 caractères au total, mais la troncature « voir plus » se déclenche à environ 210 caractères sur desktop.
• Corps de notification Web Push : pas de limite formelle, mais iOS tronque à environ 110 caractères et Android affiche environ 200.
• Base de données VARCHAR(N) : en MySQL avec collation utf8 héritée, N est en octets ; avec utf8mb4, N est en caractères. PostgreSQL varchar(N) est toujours en caractères.

Les frontières de mots ne sont pas juste split(' ')

Le tronqueur naïf de frontière de mots divise l'entrée sur /\s+/ et coupe avant le premier mot qui vous fait dépasser la limite. Cela marche pour l'anglais. Cela échoue pour le chinois, japonais, coréen et thaï, aucun n'utilise d'espaces entre les mots : l'entrée entière se retrouve comme un seul « mot », donc le rogneur garde tout ou coupe tout. L'arabe utilise des espaces mais joint les formes de lettres de manières qui changent les positions de frontière. Intl.Segmenter avec granularity: 'word' applique l'algorithme de frontière de mots UAX #29 et produit des coupes correctes pour chaque langue. Il distingue aussi les segments « semblables à des mots » (retournent isWordLike: true) des segments de ponctuation et d'espaces, donc vous pouvez trouver la dernière frontière de mot avant votre budget de caractères en un seul passage sur les segments.

Troncature CSS : text-overflow et line-clamp

Si l'objectif est de tronquer visuellement tout en gardant le texte complet dans le DOM (pour qu'il reste disponible aux lecteurs d'écran, moteurs de recherche, et copier-coller), utilisez CSS. La troncature sur une ligne requiert trois propriétés ensemble : overflow: hidden; white-space: nowrap; text-overflow: ellipsis;. text-overflow: ellipsis est défini dans le module CSS Basic User Interface Niveau 4 (Candidate Recommendation W3C août 2021) et a été livré dans chaque navigateur depuis Firefox 7 (septembre 2011) ; Internet Explorer 6 l'avait dès août 2001. La troncature multi-lignes utilise display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;. La propriété -webkit-line-clamp date de WebKit 2009 et est maintenant définie dans le module CSS Overflow Niveau 3 (Working Draft W3C). Le line-clamp sans préfixe est livré dans Safari 18 (septembre 2024) et Firefox 125 (avril 2024) ; incluez toujours la forme -webkit- en repli. Limitation critique : la troncature CSS est purement présentationnelle. Le texte complet est toujours dans la source HTML, donc l'extrait SEO, le résumé email, et l'index de recherche piloté par JS voient tous la chaîne non tronquée.

Erreurs courantes

• Utiliser str.length pour les limites. String.prototype.length de JavaScript retourne des unités de code UTF-16, pas des caractères. Un statut avec trois emoji pouces en l'air « 👍👍👍 » rapporte length === 6 ; Twitter le compte comme 3.
• Ne pas soustraire la longueur du suffixe. Si votre budget est de 160 caractères et que vous ajoutez …, votre corps de texte a 159 caractères à travailler. Beaucoup d'implémentations naïves produisent des chaînes au-dessus de la limite.
• Diviser par espaces le CJK et le thaï. Les langues sans espaces entre mots deviennent indivisibles. Utilisez Intl.Segmenter avec granularity: 'word'.
• Couper avant d'enlever la ponctuation finale. « Hello, world! » rogné à 8 caractères devient « Hello, w » naïvement, ou « Hello,… » si intelligent, ou « Hello… » si encore plus intelligent et enlève la virgule finale.
• Tronquer à l'intérieur de balises HTML. Tronquer <a href="long-url">text</a> à 30 caractères produit une chaîne avec une balise non fermée. Soit dénudez d'abord le HTML, soit utilisez un tronqueur conscient du DOM.
• Trois points vs une ellipse. L'ellipse Unicode … (U+2026) est un caractère, trois points ... font trois. Choisissez le bon pour le compteur de caractères de la plateforme.
• Faire confiance à <input maxlength> pour la validation côté client. Le HTML Living Standard compte des unités de code UTF-16, donc un utilisateur collant un emoji voit un compte différent de votre validateur backend conscient d'Unicode. Validez côté serveur.

Plus de questions fréquentes

Pourquoi Twitter compte-t-il mon URL comme 23 caractères même quand elle est beaucoup plus longue ?

Twitter enveloppe chaque URL via son raccourcisseur t.co pour analytique et détection d'abus, donc il facture chaque URL à la longueur du pire cas du raccourcisseur : 23 caractères pour HTTPS. Si vous écrivez une URL de 100 caractères, elle compte comme 23 dans l'interface Twitter. La même règle s'applique aux métadonnées Twitter Card. La bibliothèque open-source twitter-text (Twitter, MIT) implémente la règle exacte si vous avez besoin d'une simulation parfaite au caractère près.

Cet outil respecte-t-il les langues RTL comme l'arabe et l'hébreu ?

Le contenu textuel est préservé incluant ses marqueurs bidi (bidirectionnels). La troncature opère sur les caractères en ordre logique, donc couper une phrase arabe au caractère 100 coupe au 100e caractère logique (celui qu'un lecteur d'écran annoncerait en premier). L'ordre d'affichage peut s'inverser visuellement à cause du flux droite-à-gauche, mais la chaîne sous-jacente est cohérente.

Pourquoi mon SMS tronqué est-il encore divisé en trois parties à 161 caractères ?

Le SMS utilise l'encodage 7-bit GSM pour le texte latin uniquement, faisant tenir 160 caractères dans un segment. Mais tout caractère hors GSM-7, incluant les guillemets typographiques « intelligents » de l'autocorrection (U+2018 / U+2019), l'ellipse Unicode (U+2026), ou les emoji, force tout le message en encodage UCS-2 à 70 caractères par segment. Si votre message tronqué de 160 caractères contient un guillemet typographique, l'opérateur le divise en trois parties UCS-2 de 70 caractères. Remplacez les guillemets typographiques par des guillemets ASCII pour le SMS.

Puis-je tronquer du texte formaté HTML sans casser les balises ?

Pas en toute sécurité avec une coupe comptant les caractères. Soit dénudez d'abord les balises HTML (via DOMParser ou un parseur côté serveur), tronquez le texte brut, puis ré-enveloppez optionnellement ; soit utilisez un tronqueur conscient du DOM qui parcourt l'arbre des nœuds et clone les préfixes de nœuds de texte entiers. Le regex pur sur la chaîne HTML n'est pas sûr (HTML n'est pas un langage régulier).

Quelque chose est-il envoyé à un serveur ?

Non. Le texte que vous collez, la limite que vous choisissez, le suffixe que vous définissez, et la sortie tronquée sont tous traités dans le JavaScript de votre navigateur. Aucun appel réseau n'est effectué et aucune copie de votre entrée n'est stockée. Ouvrez l'onglet Réseau dans DevTools pour vérifier.