LabEx
EntrerRejoindre

Raccourcir un texte multiligne

Beginner

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

Introduction

Dans ce laboratoire, nous allons explorer l'utilisation de CSS pour réduire un texte multiligne à un nombre spécifié de lignes. En utilisant la propriété -webkit-line-clamp et d'autres propriétés CSS connexes, nous pouvons effectivement limiter le nombre de lignes affichées dans un bloc de texte, ce qui le rend plus visuellement attrayant et plus facile à lire. Grâce à ce laboratoire, vous apprendrez à implémenter cette technique dans vos projets de conception 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.

Raccourcir un texte multiligne

Vous pouvez écrire le code dans index.html et style.css..

Limitez un texte multiligne à un nombre donné de lignes.

  • Utilisez -webkit-line-clamp pour définir le nombre maximum de lignes à afficher.
  • Définissez display sur -webkit-box et -webkit-box-orient sur vertical, car ils sont requis pour appliquer -webkit-line-clamp.
  • Appliquez overflow: hidden pour masquer tout dépassement après que le texte ait été raccourci.
<p class="excerpt">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod enim
  eget ultricies sollicitudin. Nunc aliquam arcu arcu, non suscipit metus luctus
  id. Aliquam sodales turpis ipsum, in vehicula dui tempor sit amet. Nullam quis
  urna erat. Pellentesque mattis dolor purus. Aliquam nisl urna, tempor a
  euismod a, placerat in mauris. Phasellus neque quam, dapibus quis nunc at,
  feugiat suscipit tortor. Duis vel posuere dolor. Phasellus risus erat,
  lobortis et mi vel, viverra faucibus lectus. Etiam ut posuere sapien. Nulla
  ultrices dui turpis, interdum consectetur urna tempus at.
</p>

.excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Résumé

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