Retour à la ligne

Mettre le texte à la ligne à une largeur de colonne spécifique

Qu'est-ce que c'est et comment ça marche ?

Le retour à la ligne contrôle comment le texte est divisé sur les lignes quand il dépasse la largeur disponible. Les propriétés CSS `word-wrap` (standardisée en `overflow-wrap`) et `word-break` ont des comportements qui se chevauchent mais distincts. `overflow-wrap: break-word` permet des coupures seulement quand le mot ne tient pas. `word-break: break-all` coupe à n'importe quelle limite de caractère.

Cet outil génère le CSS correct pour vos besoins de retour à la ligne et montre des aperçus visuels de différentes combinaisons de propriétés.

Cas d'usage

Questions fréquentes

Quelle est la différence entre `word-wrap` et `overflow-wrap` ?

`overflow-wrap` est le nom officiel ; `word-wrap` est l'ancien nom non standard. Ce sont des alias. Le code moderne devrait utiliser `overflow-wrap`.

Quelle est la différence entre `word-break: break-all` et `overflow-wrap: break-word` ?

`break-word` ne coupe que quand le mot entier ne tient pas. `break-all` coupe à n'importe quelle position. Pour la plupart du contenu, `overflow-wrap: break-word` est préféré.

Comment fonctionnent les propriétés de césure CSS ?

`hyphens: auto` nécessite un attribut `lang` sur l'élément HTML. `hyphens: manual` ne coupe que là où vous avez placé `&shy;` ou `<wbr>`.

Qu'est-ce que la propriété `white-space` ?

`white-space: nowrap` empêche tous les retours à la ligne. `white-space: pre` préserve les espaces blancs. `white-space: pre-wrap` préserve les espaces mais renvoie à la ligne en cas de débordement.

Utilitaires

Générateur de mot de passe · Générateur de QR code · Chronomètre · Minuteur · Calculatrice · Générateur de nombre aléatoire