LabEx
EntrerRejoindre

Tronquer le texte avec l'overflow CSS

Beginner

This tutorial is from open-source community. Access the source code

Introduction

Dans ce laboratoire, nous plongerons dans le monde de la programmation CSS et apprendrons à tronquer le texte qui dépasse la largeur d'une ligne. En utilisant la combinaison des propriétés overflow, white-space et text-overflow, nous serons en mesure d'afficher un ellipse à la fin du texte tronqué. Grâce à ce laboratoire, nous comprendrons mieux comment optimiser l'affichage du texte sur les sites web.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Tronquer le texte

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Pour tronquer le texte qui est plus long qu'une ligne et ajouter un ellipse à la fin, utilisez les propriétés CSS suivantes :

  • overflow: hidden pour empêcher le texte de déborder de ses dimensions
  • white-space: nowrap pour empêcher le texte de dépasser une ligne en hauteur
  • text-overflow: ellipsis pour ajouter un ellipse si le texte dépasse ses dimensions
  • Spécifiez une largeur fixe (width) pour l'élément pour savoir quand afficher un ellipse

Notez que cette méthode ne fonctionne que pour les éléments d'une seule ligne. Par exemple :

<p class="truncate-text">If I exceed one line's width, I will be truncated.</p>

.truncate-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 200px;
}

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations ! Vous avez terminé le laboratoire Tronquer le texte. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.