8.1 Propriété text-overflow
L'enveloppement de texte et la gestion de son affichage sont des aspects cruciaux du web design, surtout lorsque tu travailles avec des longues lignes de texte ou des conteneurs de taille limitée. Les propriétés text-overflow, white-space et word-wrap (connue maintenant sous le nom de overflow-wrap) te permettent de contrôler comment le texte se comporte dans ces situations.
La propriété text-overflow contrôle comment le texte qui dépasse les limites du conteneur est affiché. Elle est utilisée en combinaison avec les propriétés white-space et overflow pour créer un effet de coupure du texte et ajouter des points de suspension.
Valeurs :
clip: coupe le texte qui dépasse les limites du conteneurellipsis: ajoute des points de suspension (...) à la fin du texte coupé
Exemple d'utilisation :
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
border: 1px solid #000;
}
.clip {
text-overflow: clip;
}
.ellipsis {
text-overflow: ellipsis;
}
<body>
<div class="container clip">Ce texte sera coupé à la limite du conteneur.</div>
<div class="container ellipsis">Ce texte sera coupé et remplacé par des points de suspension.</div>
</body>
8.2 Propriété white-space
La propriété white-space contrôle le traitement des espaces et les retours à la ligne. Elle permet de définir comment les espaces, tabulations et nouvelles lignes sont gérés dans le texte.
Valeurs :
normal: les espaces et les retours à la ligne sont traités normalement (par défaut)nowrap: le texte s'affiche sur une seule ligne, sans retour à la lignepre: les espaces et les retours à la ligne sont conservés, comme dans une balise HTML<pre>pre-wrap: les espaces et les retours à la ligne sont conservés, mais le texte peut être déplacé vers une nouvelle ligne si nécessairepre-line: les retours à la ligne sont conservés, mais les espaces sont traités comme d'habitudebreak-spaces: les espaces et les retours à la ligne sont conservés, et les longs espaces peuvent provoquer un retour à la ligne
Exemple d'utilisation :
.normal {
white-space: normal;
}
.nowrap {
white-space: nowrap;
}
.pre {
white-space: pre;
}
.pre-wrap {
white-space: pre-wrap;
}
<body>
<div class="normal">Ce texte sera déplacé vers la ligne suivante s'il n'y a pas assez de place.</div>
<div class="nowrap">Ce texte ne sera pas déplacé vers la ligne suivante et s'affichera sur une seule ligne.</div>
<div class="pre">
Ce texte conservera
tous les espaces et retours à la ligne.
</div>
<div class="pre-wrap">
Ce texte sera déplacé vers la ligne suivante, mais conservera aussi
tous les espaces et retours à la ligne.
</div>
</body>
8.3 Propriété overflow-wrap
La propriété overflow-wrap (anciennement connue sous le nom de word-wrap) contrôle le transfert des mots qui dépassent les limites du conteneur. Elle permet d'éviter le débordement du conteneur par des mots longs qui ne peuvent pas être divisés.
Valeurs
normal: le transfert des mots est effectué selon les règles standards de transfertbreak-word: le transfert des mots est effectué, même si cela nécessite de diviser le mot en parties
Exemple d'utilisation :
.container {
width: 200px;
border: 1px solid #000;
}
.normal {
overflow-wrap: normal;
}
.break-word {
overflow-wrap: break-word;
}
<body>
<div class="container normal">Ce texte sera déplacé vers la ligne suivante s'il n'y a pas assez de place.</div>
<div class="container break-word">CetmottrèslongNEquipasserapasalalignesuivantes'ilyapas assezdeplace.</div>
</body>
Explication du code :
overflow-wrap: normal;: le transfert des mots est effectué selon les règles standards, sans division des motsoverflow-wrap: break-word;: les mots longs seront divisés et déplacés vers la ligne suivante si nécessaire
8.4 Utilisation combinée des propriétés
Les propriétés text-overflow, white-space et word-wrap sont souvent utilisées ensemble pour obtenir l'effet d'affichage du texte désiré dans des conteneurs de taille limitée.
Exemple d'utilisation :
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: break-word;
border: 1px solid #000;
}
<body>
<div class="container">Ce texte sera coupé et remplacé par des points de suspension s'il n'y a pas assez de place dans le conteneur.</div>
</body>
Explication du code :
white-space: nowrap;: le texte s'affiche sur une seule ligne, sans transfertoverflow: hidden;: cache le texte qui dépasse les limites du conteneurtext-overflow: ellipsis;: ajoute des points de suspension à la fin du texte coupéoverflow-wrap: break-word;: déplace les mots longs, s'il n'y a pas assez de place
GO TO FULL VERSION