Überlegungen zur Kürzung von mehrzeiligem Text mit einer Schaltfläche „Mehr anzeigen“

Ich bin erst kürzlich zufällig auf diese kleine Anforderung gestoßen. Ich erinnere mich, dass ich vor langer Zeit JS verwendet habe, um sie zu bewältigen. Schließlich war ich damals jung und unwissend. Der Umschaltvorgang kann mit der Pseudoklasse Checked implementiert werden, was etwas günstiger ist. Hier die wichtigsten Punkte:

1. Mehrzeiliger Text wird abgeschnitten und Auslassungspunkte werden angezeigt
2. Die Schaltfläche „Mehr anzeigen“ erweitert den gesamten Text
3. Nach dem Erweitern des Textes wird der Buttontext zu „Text reduzieren“
4. Die Schaltfläche wird angezeigt, wenn der Text abgeschnitten ist (wenn Ihr Text nur eine Zeile umfasst, muss er nicht angezeigt werden :sweat:)

Frage: Textüberlauf: Auslassungspunkte unterstützen keine mehrzeilige Kürzung. Wie ändere ich den Text einer Schaltfläche mit CSS? Wie lege ich die Bedingungen fest, unter denen die Schaltfläche angezeigt wird? Ich werde sie im Folgenden einzeln erklären:Ballon:

Abschneiden von mehrzeiligem Text

Nehmen wir an, dass die vorhandene HTML-Struktur wie folgt ist:

<div Klasse="Box">
  <p>Textinhalt</p>
</div>

Wenn Sie eine einzelne Zeile abschneiden müssen, ist die allgemeine Vorgehensweise:

P {
  Textüberlauf: Auslassungspunkte;
  Überlauf: versteckt;
  Leerzeichen: Nowrap;
}

Die Wirkung ist wie folgt:

Bei mehrzeiligem Text ist eine Zeilenklemme erforderlich, um die Anzahl der Zeilen des abgeschnittenen Textes zu definieren:

P {
  Anzeige: -webkit-box;
  -Webkit-Leitungsklemme: 3;
  -webkit-box-orient: vertikal;
  Überlauf: versteckt;
}

Die Wirkung ist wie folgt:

Klicken Sie auf die Schaltfläche, um den gesamten Text anzuzeigen

Nun wird die HTML-Struktur wie folgt umgewandelt:

<div Klasse="Box">
  <input type="checkbox" name="umschalten" id="umschalten" style="anzeige: keine;">
  <p>Textinhalt</p>
  <label for="toggle">Mehr anzeigen</label>
</div>

Um das Klickverhalten einer Schaltfläche zu überwachen, verwenden Sie die am Anfang des Artikels erwähnte Pseudoklasse Checked:

Eingabe[name="Umschalten"]:aktiviert {
 & + p {
   -webkit-line-clamp: nicht gesetzt;
 }
}

Auf diese Weise wird, wenn der Benutzer klickt (auswählt), der gesamte Text angezeigt und der Text ausgeblendet, wenn er nicht ausgewählt ist:

Dynamischer Buttontext

Logischerweise sollte der Schaltflächentext nach der Anzeige des gesamten Textes auf „Text ausblenden“ umgestellt werden. Wie kann ich den Text mit CSS ändern? Verwenden Sie einfach das Inhalts-Pseudoelement.

Entfernen Sie den Text aus HTML und ersetzen Sie ihn durch das CSS-Steuerelement:

<label für="toggle"></label>

Etikett {
  &::nach {
    Inhalt: „mehr anzeigen“;
  }
}

Ebenso erhalten wir:

Eingabe[name="Umschalten"]:aktiviert {
  & ~ Etikett {
    &::nach {
      Inhalt: „Text ausblenden“;
    }
  }
}

Die Wirkung ist wie folgt:

Wenn der Button-Stil hässlich ist, passe ihn selbst an :sweat:

Bedingungen, unter denen die Schaltfläche angezeigt wird

Wenn der Text weniger als drei Zeilen umfasst, sollte die Schaltfläche nicht angezeigt werden, da sie nicht erforderlich ist:

Es gibt ein großes Problem. Nachdem ich im Internet gesurft hatte, stellte ich fest, dass es keine Pseudoklasse gibt, um festzustellen, ob der Text abgeschnitten ist. Wenn ja, können wir Folgendes tun:

P {
 &:abgeschnitten {
   & + Bezeichnung {
    Anzeige: Block;
   }
 }   
}
Etikett {
  Anzeige: keine;
}

abgeschnitten bedeutet abgeschnitten.

Aber auch so können wir unser Ziel nicht erreichen, denn wenn Sie den gesamten Text anzeigen, wird Ihr Text nicht abgeschnitten, sodass die Schaltfläche verschwindet:

Das Obige ist ein Simulationseffekt, der durch ein Stück JS erreicht wird. Der Quellcode lautet wie folgt:

let list = document.querySelectorAll("p");
let observer = neuer ResizeObserver(Einträge => {
  Einträge.fürJeden(Element => {
    item.target.classList[item.target.scrollHeight > item.contentRect.height ? "Hinzufügen" : "Entfernen"]("abgeschnitten");
  });
});

Liste.fürJeden(p => {
  Beobachter.beobachten(p);
});

Das Prinzip besteht darin, die Größenänderungen von Textelementen zu überwachen und dann dynamisch abgeschnittene Klassennamen hinzuzufügen: joy:

Daher sollte die gekürzte Pseudoklasse in Ihrem CSS in die gekürzte Klasse :sweat: geändert werden.

P {
 &.abgeschnitten {
   & + Bezeichnung {
    Anzeige: Block;
   }
 }   
}

Wir hoffen, dass die Schaltfläche beim Umschalten immer vorhanden ist, anstatt die Schaltfläche nicht anzuzeigen, wenn der Text nicht abgeschnitten ist. Daher müssen wir die Größenänderung des Textelements nicht ständig überwachen. Wir benötigen nur einen Anfangswert (ob der Text bei der Initialisierung abgeschnitten wird), d. h. wir überwachen nur einmal!

Einträge.fürJeden(Element => {
  //... Originalcode observer.unobserve(item.target); // Monitor entfernen });

Oder Sie müssen diese API überhaupt nicht verwenden, sondern nur einmal durchlaufen und beurteilen, wenn die Seite initialisiert wird!

let list = document.querySelectorAll("p");

Liste.fürJeden(Element => {
  item.classList[item.scrollHeight > item.offsetHeight ? "Hinzufügen" : "Entfernen"]("abgeschnitten");
});

Auf diese Weise wird das P-Element beim Initialisieren der Seite automatisch mit dem gekürzten Klassennamen hinzugefügt und die Schaltfläche kann jederzeit angezeigt werden:

Erweiterungen

So könnt ihr beispielsweise den Button-Stil anpassen, unten eine transparente Verlaufsmaske hinzufügen und den Übergangseffekt beim Umschalten aktivieren:grins:

Zusammenfassen

Die geprüfte Pseudoklasse ist eine gute Sache, sie kann viele Anforderungen erfüllen, ohne dass JS geschrieben werden muss, sodass Sie sie für alle Vorgänge im Zusammenhang mit dem Wechseln von Klassen verwenden können.

Das Obige möchte ich Ihnen über die mehrzeilige Textkürzung mit einer Schaltfläche „Mehr anzeigen“ mitteilen. Ich hoffe, es wird Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!