Comment masquer le débordement de texte avec un indicateur personnalisé en CSS ?

Masquage du débordement de texte avec un indicateur

Pour condenser le texte qui dépasse deux lignes et indiquer le contenu masqué, une solution personnalisée peut être mise en place jusqu'à la future implémentation de la propriété line-clamp.

Personnalisé Solution

1. Définissez la hauteur de ligne et la hauteur maximale du conteneur de texte pour limiter son affichage à deux lignes.
2. Utilisez la propriété overflow: Hidden pour masquer le texte débordant.
3. Créez un effet d'ombre pour obscurcir le texte qui serait autrement révélé par les points de suspension.
4. Placez un élément span avec l'élément souhaité texte de l'indicateur en bas à droite du conteneur, en utilisant un positionnement absolu.
5. Ajoutez les points de suspension au début de l'élément span et le texte de l'indicateur à son fin.

CSS

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

.main-text:after {
  content: "123 T.";
  display:inline-block;
  width:40px;
  position:relative;
  z-index:999;
  box-shadow:
    40px 0 0 #fff,
    80px 0 0 #fff,
    120px 0 0 #fff,
    160px 0 0 #fff;
  color: #8e8f8f;
  font-size: 10px;
  background: #fff;
  margin-left:2px;
}

.main-text span {
  position: absolute;
  top: 1.2em;
  right: 0;
  padding: 0 3px;
  background: #fff;
}

.main-text span:before {
  content: "...";
}

.main-text span:after {
  content: "123 T.";
  color: #8e8f8f;
  font-size: 10px;
}

HTML

<div class="main-text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus mi, dapibus sit amet posuere eu, porttitor condimentum nulla. Donec convallis lorem justo, eget malesuada lorem tempor vitae. Aliquam sollicitudin lacus ipsum, at tincidunt ante condimentum
  vitae. <span></span>
</div>

Cette solution masque le texte de débordement et affiche l'indicateur spécifié après deux lignes.

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!