Comment masquer le texte après deux lignes et afficher un indicateur de débordement tel que '...123 T.' ?

Masquer le texte après les points avec un indicateur de débordement de deuxième ligne

Lors de l'affichage de texte avec un espace limité, il est souvent nécessaire de tronquer et d'indiquer un débordement. Cette question aborde le défi de masquer le texte qui dépasse deux lignes et d'ajouter "...123 T". à la deuxième ligne comme indicateur.

Mise en œuvre actuelle

Le code fourni aborde initialement ce problème :

<div class="container">
  <span class="main-text">
    Long text that exceeds two lines.
  </span>
  <span class="small-text">123 T.</span>
</div>

.main-text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

Alors que cela La méthode masque le texte en excès sur deux lignes, elle n'est pas compatible avec tous les navigateurs et peut ne pas répondre pleinement aux exigences souhaitées. résultat.

Solution future

La spécification propose une propriété abrégée, line-clamp, qui peut simplifier cette tâche en une seule ligne :

line-clamp: 2 "...123 T.";

Cette propriété permet la création de texte visuellement tronqué avec des indicateurs de débordement.

Hacky Alternative

Jusqu'à ce que la propriété line-clamp soit largement prise en charge, une solution de contournement peut être obtenue à l'aide d'un hack CSS :

.main-text {
  line-height: 1.2em;
  max-height: calc(2 * 1.2em);
  overflow: hidden;
  position: relative;
}

<div class="main-text">
  Lorem ipsum ...<span>123 T.</span>
</div>

Dans cette approche, un élément span avec les points cachés et "123 T." le texte est positionné en bas à droite du conteneur. Une grande ombre de boîte est utilisée pour masquer les points, affichant uniquement les points de suspension.

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!