white-space
Détermine comment traiter les espaces, les retours à la ligne et le retour automatique dans le texte.
- Valeur initiale
normal- Héritée
- Oui
- Animable
- non
- S’applique à
- tous les éléments
- JavaScript
element.style.whiteSpace = "nowrap"
Exemple
#.message {
white-space: pre-line;
}<p class="message stage" style="white-space: pre-line; margin: 0;">Salut !
Ton exercice a été corrigé.
Score : 92 %</p>Définition et utilisation
#Par défaut, le navigateur réduit plusieurs espaces et retours à la ligne du code à un seul espace, et le texte revient à la ligne automatiquement. La propriété white-space permet de changer ce comportement.
nowrap désactive le retour à la ligne, donc le texte reste sur une seule ligne. pre conserve tous les espaces et retours à la ligne exactement comme dans le code, sans retour automatique. pre-wrap les conserve aussi, mais autorise le retour à la ligne pour les lignes longues, et pre-line ne conserve que les retours à la ligne.
white-space: nowrap associé à overflow: hidden et text-overflow: ellipsis est la recette classique pour tronquer un texte avec des points de suspension.
Syntaxe
#white-space: normal | nowrap | pre | pre-wrap | pre-line | break-spaces;Valeurs
#- Les espaces se réduisent, le texte revient à la ligne automatiquement.
- Une seule ligne sans retour automatique, le texte dépasse du conteneur.
- Les espaces et les retours à la ligne comme dans le code, sans retour automatique.
- Les espaces et les retours à la ligne comme dans le code, avec retour automatique.
- Les retours à la ligne conservés, les espaces réduits.
Valeurs en pratique
#normal
.demo { white-space: normal; }nowrap
.demo { white-space: nowrap; }pre
.demo { white-space: pre; }pre-wrap
.demo { white-space: pre-wrap; }pre-line
.demo { white-space: pre-line; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Affichez le texte saisi par l’utilisateur, par exemple un commentaire avec des retours à la ligne, avec
white-space: pre-line. - Protégez avec
nowraples boutons et les étiquettes qui ne doivent pas se couper sur deux lignes.
Entrées associées
#- text-overflowDétermine comment marquer un texte coupé à la fin d’une ligne, par exemple avec des points de suspension.
- overflow-wrapCoupe les mots longs uniquement lorsqu’ils dépasseraient sinon du conteneur.
- word-breakPermet de couper les mots n’importe où lorsqu’ils ne tiennent pas sur la ligne.
- overflowDécide quoi faire du contenu qui ne tient pas dans un élément.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.