Comment puis-je créer des limites de caractères en CSS pour les sites Web réactifs ?

Création de limites de caractères en CSS pour les sites Web réactifs

Lors de la conception d'un site Web réactif, le contrôle de la longueur du texte est crucial. Il peut être nécessaire de limiter la longueur des phrases à un nombre spécifique de caractères, afin de garantir que le texte ne déborde pas sur les grands écrans.

Pour y parvenir, une méthode de « troncature » peut être utilisée en utilisant la largeur maximale du CSS. et propriétés de débordement-ellipse. Cette technique consiste à définir une largeur maximale pour le texte et à ajouter des points de suspension (...) pour indiquer que le texte a été tronqué.

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 75ch; /* Adjust to desired character limit */
}

Par exemple :

.wrapper {
  padding: 20px;
  background: #eaeaea;
  max-width: 400px;
  margin: 50px auto;
}

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

.demo-2 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 150px;
}

<div class="wrapper">
  <p class="demo-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>

<div class="wrapper">
  <p class="demo-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>

Cette technique garantit que le texte sera renvoyé à la ligne dans la limite de caractères spécifiée sur différentes tailles d'écran sans perturber la mise en page.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!