编程知识 cdmana.com

CSS implémente la fonction d'expansion et d'arrimage du Texte multiligne

Une photo d'ouverture

more.gif

Comme le montre la figure ci - dessus,L'expansion et l'arrimage de plusieurs lignes de texte est un effet interactif très courant.

Les principales difficultés de mise en page et d'interaction sont les suivantes:

  • Situé dans le coin inférieur droit du Texte multiligne“Déplier et arrimer”Boutons
  • “Déploiement”Et“Range ça.”Commutation entre deux états
  • Lorsque le texte ne dépasse pas le nombre de lignes spécifié,Ne pas afficher“Déplier et arrimer”Boutons

Avant ça,Regardez cette disposition seule,Même avec la coopérationJavaScriptIl n'est pas si facile de faire de belles interactions.Après l'étude de toutes les parties,Trouvé purCSSPeut également être parfaitement réalisé.

Première étape,"Déplier et arrimer"Boutons

Troncature de Texte multiligne

Supposons qu'il y ait un paragraphehtmlStructure

<div class='more-text'>
     Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.
</div>
Copier le Code

Texte multiligne au - delà de la façon dont les ellipsies sont affichées,On en utilise beaucoup d'habitude.,Les codes clés sont les suivants:

.more-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
 }
Copier le Code

image.png

Bouton - poussoir en bas à droite de l'effet surround
<div class='more-text'>
    <div class='more-btn'>Déploiement</div>
     Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.
</div>
Copier le Code
.more-btn{
    float: left;
    /* Autres styles de décoration */
}
Copier le Code

image.png

Flotteur droit

.more-btn{
    float: right;
     /* Autres styles de décoration */
}
Copier le Code

image.png

Puis dans le coin inférieur droit

.more-btn{
    float: right;
    margin-top: 50px;
     /* Autres styles de décoration */
}
Copier le Code

image.png

C'est facile à voir.,.Le bouton est en bas à droite,Mais l'espace vide au - dessus du bouton est trop grand.Ce n'est pas l'effet que nous espérions.

En ce moment,Faites référence à un pseudo - élément avec plusieurs éléments flottants pour compléter.

.more-text::before {
    content: '';
    float: right;
    width: 10px;
    height: 50px;
    background: red;
}
.more-btn{
    float: right;
    clear: both;
     /* Autres styles de décoration */
}
Copier le Code

image.png

Comme indiqué ci - dessus,Quand les boutons et les pseudo - élémentsbefore Flottent. , Et le bouton clear: both,En ce moment,Pseudo - élémentbeforeLe bouton a été enfoncé avec succès dans le coin inférieur droit. Laisser les pseudo - éléments beforeL'effet suivant se produit lorsque la largeur est enlevée.

.more-text::before {
    content: '';
    float: right;
    width: 0;
    height: 50px;
    background: red;
}
Copier le Code

image.png

Comme vous pouvez le voir,Bouton surround non~Souvent parfait pour répondre aux attentes.

Maisbefore La hauteur est fixe 50px,Il n'est pas nécessaire de répondre aux besoins du scénario. Doit également être modifié comme suit: calcCalcul dynamique.

.more-text::before {
    content: '';
    float: right;
    width: 0;
    height: calc(100% - 20px); 
    /*100%Soustrayez la hauteur d'un bouton*/
    background: red;
}
Copier le Code

image.png

C'est dommage.,calcN'a pas atteint l'effet souhaité.

Pourquoi??Ouvrez la console pour découvrir,calc La hauteur calculée est 0. Comment est - ce possible? ?La raison en est queL'élément parent n'a pas de hauteur définie,calcÀ l'intérieur. 100% Et ça n'a pas marché. .Mais le problème est,La hauteur requise ici varie dynamiquement,Il n'est pas possible de fixer une hauteur fixe pour le parent.

Jusqu'ici.,Nous devons modifier la disposition.UtilisationflexMise en page.L'approche générale est de flex Mise en page Dans les enfants de ,La hauteur de variation peut être calculée en pourcentage.

Modifier comme suit:,Voilà..more-text Encore une couche. ,Réinitialiser display: flex

<div class='more-wrapper'>
    <div class='more-text'>
        <div class='more-btn'>Déploiement</div>
        Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.
    </div>
</div>
Copier le Code
.more-wrapper{
    display: flex;
}
Copier le Code

Après cette modification,calcLa hauteur de calcul de.Comme le montre la figure ci - dessous.

image.png

Jusqu'ici.,L'effet d'enroulement du coin inférieur droit du bouton est presque terminé.Avec un bouton - poussoir, cliquer sur l'événement est un grand succès.

Traitement de la compatibilité du navigateur

L'implémentation ci - dessus est le traitement parfait.Mais,InFirefoxIl y a un problème de compatibilité avec le navigateur.

image.png

Oh, Hugh..C'est tellement embarrassant.Les malheurs vont de pair.,SafariIl y a aussi eu un problème de compatibilité avec le navigateur.

Après de nombreuses vérifications ,La découverte estdisplay: -webkit-box;Il y a un problème de compatibilité avec la propriété.

Le problème, c'est que,Si ce n'est pas le casdisplay: -webkit-box;Comment réaliser la troncature multiligne?Si vous définissez une hauteur maximale avec le nombre de lignes connu,La troncature multiligne est également théoriquement possible.Donc, nous passons par l'attribut hauteur de ligneline-height On y va. .Si nécessaire, réglez - le à 3 D'accord,Alors réglez la hauteur à line-height * 3.

.more-text {
    /* display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; */
    overflow: hidden;
    line-height: 1.5;
    max-height: 4.5em;
 }
Copier le Code

image.png

Il manque quelque chose. Ellipsis....Peut être réalisé avec des pseudo - éléments.

.more-btn::before{
    content: '…';
    color: #333;
    font-size: 14px;
    position: absolute;
    left: -10px;
    transform: translateX(-100%);
}
Copier le Code

image.png

Un grand succès,Ensuite, cliquez sur Switch pour.

Cliquez pour basculer “Déploiement“ Avec ”Range ça.“.

Notre but est pur. CSSTerminé..AlorsCSSLe changement d'état est essentiel,Ça marche.input type = "checkbox" Cette fonctionnalité complète .

Pour utiliserinput Les caractéristiques doivent être correctes. htmlQuelques modifications au Code.

<div class="more-wrapper">
    <input type="checkbox" id="exp" />
    <div class="more-text">
      <!-- <div class="more-btn">Déploiement</div> -->
      <label class="more-btn" for="exp">Déploiement</label>
      Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.Comment faire une bonne interaction de déploiement et d'arrimage.
    </div>
</div>
Copier le Code
#exp:checked + .more-text {
    -webkit-line-clamp: 999;
    max-height: none;
}
Copier le Code

more.gif

Et puis...,Est de transformer le texte du bouton,Et les ellipses sont cachées après le déploiement.Vous pouvez utiliser des pseudo - éléments pour traiter.

<label class="more-btn" for="exp"></label>
 <!--  Supprimer le texte du bouton  -->
Copier le Code
.more-btn::after {
    content: 'Plus';
}
Copier le Code

In:checkedDans l'état

#exp:checked + .more-text .more-btn::after {
    content: 'Range ça.';
}
Copier le Code

Traitement de la dissimulation des ellipses .

#exp:checked + .more-text .more-btn::before {
    visibility: hidden;
}
Copier le Code

more.gif

Jusqu'ici.,L'effet dont nous avons besoin est.

Bien sûr, nous pouvons ajouterAnimation de transitionRendre le déploiement plus attrayant.Pas de démonstration ici.

Enfin, Jugement du nombre de lignes de texte

Les étapes précédentes ont été en mesure de répondre aux besoins d'utilisation.Mais il y a un problème.Comme quand Lorsque le contenu du texte est faible ,Il n'y a pas de troncature pour le moment, Pas besoin. Ellipsis...EtDéplier et arrimerBoutons.

image.png

Bien sûr, vous pouvez choisirjs Comment juger .Mais notre but est purCSS.

C'est...CSS Pas de jugement logique ,On ne peut que trouver un autre moyen, Tricherie visuelle .Ou appeléUn piège..

Comme dans la scène ci - dessus, Aucune troncature n'a eu lieu ,Alors pas besoinEllipsis...EtDéploiementBoutons.À ce moment - là,,Si un élément est ajouté à la fin du texte.Et pour ne pas affecter la disposition,Définir un positionnement absolu pour cet élément.

.more-text::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: red;
}
Copier le Code

En même temps, Nous avons mis overflow: hidden; Enlevez d'abord. . Les résultats sont les suivants:

image.png

Comme le montre la figure,Les éléments de la section Rouge sont parfaitement bloquésBoutonsSection.

Alors, changeons le rouge en couleur de fond paternelle,Et restaurer le parentoverflow: hidden;.

more.gif

Voir l'image ci - dessus,Et après avoir découvert le déploiement,Le pseudo - élément couvre le bouton d'arrimage.Il faut donc apporter d'autres modifications.

#exp:checked + .more-text::after {
    visibility: hidden;
}
Copier le Code

more.gif

Comme vous pouvez le voir,Non~ Ça marche bien. .

Note::IE10Ce qui suit n'est pas considéré comme~

L'idée de la réalisation s'inspire de Lire l'équipe de première ligne  , Auteur Yan Wenbin

版权声明
本文为[Seikann]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/09/20210914162236093K.html

Scroll to Top