Aller au contenu
TextArray1.87.0
Tout en local

Générateur de CSS line-clamp

Créez une règle CSS qui tronque le texte après un nombre défini de lignes, avec ellipsis ou dégradé de fondu.

Sortie
Outils connexes
Générateur CSS clamp()Outils de développement
Tronquer le texteManipulation de texte
Générateur text-shadow CSSnouveauOutils de développement
différence de clé i18nOutils de développement
Convertisseur TOML en JSONOutils de développement
SQL vers JSONOutils de développement
Générateur de CSS line-clamp
Les titres de cartes, les descriptions de produits et les aperçus de commentaires ont tous besoin du même truc à un moment: afficher quelques lignes de texte et couper le reste proprement au lieu de laisser un long paragraphe gâcher la mise en page. Ce générateur écrit cette règle CSS pour vous, prête à coller dans une feuille de style sous forme de classe ".line-clamp".
Choisissez le mode une ligne pour une troncature d'une ligne — la combinaison classique "overflow: hidden; text-overflow: ellipsis; white-space: nowrap" utilisée pour les titres et les cellules de tableau — ou le mode multi-lignes, qui utilise "-webkit-line-clamp" pour couper après le nombre de lignes que vous définissez, en respectant la hauteur de ligne que vous choisissez. Activez l'option fondu pour adoucir la dernière ligne vers l'arrière-plan avec un dégradé au lieu d'une ellipsis fixe, ce qui se lit mieux sur une image ou une carte colorée. L'option de support ajoute un bloc "@supports" pour que les navigateurs sans support line-clamp reçoivent une coupure max-height raisonnable plutôt qu'un mur de texte non coupé, et l'option Tailwind ajoute la classe utilitaire correspondante ("truncate" ou "line-clamp-N") en tant que commentaire afin que vous n'ayez pas à la chercher.
Tapez ou collez une phrase dans le champ d'aperçu et l'outil estime comment votre texte s'enroulerait sur le nombre de lignes choisi, afin que vous puissiez vérifier le nombre de lignes avant de vous engager dans une conception. L'estimation est basée sur une longueur de ligne de lecture moyenne plutôt que sur une mesure des polices et conteneurs réels — c'est un guide pour choisir un nombre de lignes raisonnable, pas un rendu précis au pixel.
Tout s'exécute localement dans votre navigateur: le CSS est généré au fur et à mesure que vous tapez, rien n'est téléchargé n'importe où, et vous pouvez copier le résultat, le télécharger en tant que fichier .txt, ou l'envoyer directement à l'entrée d'un autre outil pour continuer à travailler dessus.
FAQ
Quelle est la différence entre la troncature d'une ligne et celle de plusieurs lignes?
Une ligne utilise text-overflow: ellipsis avec white-space: nowrap et fonctionne dans tous les navigateurs. Plusieurs lignes utilise -webkit-line-clamp pour couper après le nombre de lignes choisi, ce qui nécessite la configuration display: -webkit-box que cet outil génère pour vous.
Pourquoi l'option de fondu supprime-t-elle -webkit-line-clamp?
Un dégradé de fondu nécessite une max-height fixe et un pseudo-élément positionné, pas le modèle de boîte line-clamp, donc l'outil bascule vers une règle basée sur max-height chaque fois que le fondu est activé — pour les modes une ligne et plusieurs lignes.
Ai-je toujours besoin du support pour les navigateurs modernes?
Tous les navigateurs modernes actuels supportent -webkit-line-clamp, donc le support protège principalement les navigateurs anciens ou inhabituels. Il est inoffensif de le laisser activé : il s'applique uniquement dans un bloc "@supports not" que les navigateurs modernes ignorent.
Quelle est la précision de l'aperçu?
C'est une estimation basée sur une longueur moyenne de ligne, pas une mesure de votre police réelle ou de la largeur du conteneur. Utilisez-la pour juger si votre nombre de lignes choisi semble correct, puis vérifiez le résultat réel sur votre page.
Mon texte d'aperçu est-il téléchargé quelque part?
Non. Le CSS et l'aperçu sont générés entièrement dans votre navigateur — rien de ce que vous tapez n'est envoyé à un serveur.