jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils CSS et design

Gratuit Constructeur CSS text-indent hanging/each-line

Generez des declarations text-indent CSS avec les mots-cles hanging et each-line pour l'indentation suspendue et les retraits de saut de ligne.

Chargement de l'outil...

Qu'est-ce que Constructeur CSS text-indent hanging/each-line ?

CSS text-indent supporte les mots-cles hanging et each-line (Baseline 2026 : Chrome 130+, Safari 18.2+, Firefox 135+). hanging inverse la direction du retrait : la premiere ligne reste a gauche et les suivantes sont en retrait. each-line applique le retrait apres chaque saut de ligne force (<br>).

Réponse rapide

text-indent: 2em hanging cree un retrait suspendu. Ajoutez each-line pour les sauts de ligne. Chrome 130+, Safari 18.2+, Firefox 135+.

Last updated: 2026-06-01

Limites

  • Necessite les navigateurs Baseline 2026.
  • each-line ne se declenche que sur les sauts forces.
  • text-indent ne fonctionne pas sur les elements inline.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Choisissez la valeur de retrait en em, px ou rem.
  2. Activez hanging pour un retrait inverse.
  3. Activez each-line pour les sauts de ligne.
  4. Copiez le CSS avec le repli pour les navigateurs anciens.

A quoi il sert

  • Bibliographie avec retrait suspendu.
  • Listes de definition avec each-line.
  • Ponctuation suspendue pour un aspect typographique soigne.

Cas d'usage

Exemples concrets

Exemple

Bibliographie avec retrait suspendu

text-indent: 2em hanging pour que la premiere ligne soit a gauche et les suivantes en retrait de 2em.

Exemple

Liste de definition avec each-line

text-indent: 2em hanging each-line pour les definitions avec <br>.

Erreurs frequentes

  • Utiliser hanging sans valeur de longueur.
  • Supposer que each-line fonctionne avec le retour a la ligne automatique.
  • Combiner hanging avec une valeur negative.

Vérification

  1. Verifiez la valeur calculee dans DevTools.
  2. Comparez le rendu entre Chrome, Firefox et Safari.

FAQ

Questions sur Constructeur CSS text-indent hanging/each-line

Navigateurs supportant hanging et each-line?

Chrome 130+, Safari 18.2+, Firefox 135+. Les anciens ignorent les mots-cles.

Unites supportees?

Toutes les unites CSS : em, rem, px, pourcentages.

Affecte les elements inline?

Non, text-indent ne s'applique qu'aux conteneurs block.

each-line reinitialise au debut de chaque paragraphe?

Chaque paragraphe commence fraichement. each-line agit apres <br>.

Outils lies

Autres outils outils css et design

Outils CSS et design

Générateur de carrousel CSS

Générez le balisage d’un carrousel CSS natif avec scroll-snap, boutons de défilement, repères de défilement et structure de liste accessible. Aucun JavaScript requis.

Ouvrir l'outil

A essayer aussi

A essayer aussi