MDNs verkürzte Textwirkung neu erstellen

Die neuen im März eingeführten neuen Designs von MDN sind unglaublich! Einige dieser cleveren CSS -Tricks sind es wert, genossen zu werden, wie z. B. wie Kartenkomponenten verkürzten Text umgehen.

Ist es nicht cool? Lassen Sie uns eine tiefere Analyse haben. Es gibt zwei Hauptgründe, warum mich diese Methode anzieht:

• Es schneidet geschickt den Inhalt ab, der an anderer Stelle als CSS -Datenverlust bekannt ist. Obwohl der Datenverlust normalerweise schlecht ist, wird es genau hier genau verwendet, da die Zusammenfassung eine Vorschau des vollständigen Inhalts sein soll.
• Dies unterscheidet sich von der Verwendung von text-overflow: ellipsis zum Abschneiden von Text, die Eric Eggert kürzlich seine Bedenken ausdrückte. Der Haupteinwand ist die Unfähigkeit, den verkürzten Text wiederherzustellen - die assistive Technologie wird ihn lesen, aber Benutzer mit normalem Sehvermögen können ihn nicht wiederherstellen. Die MDN -Methode bietet mehr Kontrolle, da die Kürzung nur visuell ist.

Wie macht MDN das? HTML hat nichts Besonderes, es ist nur ein Container mit Absätzen.

<div>
  <p>Lorem Ipsum Dolor SIT AMET ZUSAMMENTUR APISIENCISION ELIT.</p>
</div>

Wir können einige grundlegende Stile hinzufügen, um es zu perfektionieren.

Wieder nichts Besonderes. Unser Ziel ist es, den Inhalt nach der dritten Zeile abzuschneiden. Wir können max-height des Absatzes festlegen und den Überlauf verbergen:

 .Card p {
  maximalhöhe: calc (4rem* var (-base));
  Überlauf: versteckt;
}

Warten Sie, was ist calc() ? Beachten Sie, dass ich ein --base -Voreinstellung habe, das als gemeinsamer Multiplikator verwendet werden kann. Ich benutze es, um die Schriftgröße, die Linienhöhe, die Kartenfüllung und jetzt max-height des Absatzes zu berechnen. Ich finde es einfacher, konstante Werte zu verwenden, insbesondere wenn die erforderliche Größe auf der solchen Skala basiert. Mir ist festgestellt, dass MDN auch eine ähnliche Variable --base-line-height verwendet, wahrscheinlich für denselben Zweck.

Wie kann man die dritte Textzeile ausblenden? Dies ist der klassische linear-gradient() im Absatz ::after Pseudoelement, der an der unteren rechten Ecke der Karte fixiert ist. Deshalb können wir es so einstellen:

 .Card p :: nach {
  Inhalt: ""; /* müssen Pseudo-Elemente rendern* /
  Hintergrundbild: Linear-Gradient (rechts, transparent, var (-Hintergrund) 80%);
  Position: absolut;
  Einschub-Inline-End: 0;
}

Beachten Sie, dass ich eine --background -Variable angerufen habe, die auf denselben Hintergrundfarbenwert wie die von .card selbst verwendete Hintergrundfarbe eingestellt ist. Auf diese Weise sieht der Text in den Hintergrund aus. Ich stellte fest, dass der zweite Farbstop -Punkt im Gradienten angepasst werden muss, da der Text nicht vollständig versteckt ist, wenn der Gradient vollständig auf 100%vermischt ist. Ich fand, dass 80% ein guter Punkt für mich waren.

Ja, ::after Anhalt der Höhe und Breite benötigt. Durch die Höhe kommt die --base wieder ins Spiel, da wir die Linienhöhe des Absatzes skalieren sollen, um den Text mit der Höhe von ::after zu decken.

 .Card p :: nach {
  /* Wie oben*/
  Höhe: Calc (1REM * var (-Basis) 1px);
  Breite: 100%;
}

Das Hinzufügen einer zusätzlichen Pixelhöhe scheint das Problem zu lösen, aber wenn ich Devtools betrachte, kann MDN es ohne es tun. Auch hier benutze ich nicht top (oder inset-block-start ), um den Gradienten in diese Richtung auszugleichen. ? ‍Eitung

Jetzt, da p::after absolut positioniert ist, müssen wir ausdrücklich die relative Positionierung auf dem Absatz erklären ::after um in seinem Strom zu bleiben. Andernfalls wird ::after dem Dokumentstrom vollständig entfernt und erscheint schließlich außerhalb der Karte. Dies ist das vollständige CSS .card :

 .Card p {
  maximalhöhe: calc (4rem* var (-base));
  Überlauf: versteckt;
  Position: Relativ; /* :: Nach erforderlich* /
}

Wir sind fertig, oder? NEIN! Der Gradient scheint nicht am richtigen Ort zu sein.

Ich gebe zu, ich habe einen Fehler gemacht und Devtools auf MDN gestartet, um zu sehen, was mir fehlt. Oh ja, ::after muss als Blockelement angezeigt werden. Dies ist sehr klar, wenn Sie einen roten Rand hinzufügen. ? ‍Eitung

 .Card p :: nach {
  Inhalt: "";
  Hintergrund: Linear-Gradient (nach rechts, transparent, var (-Hintergrund) 80%);
  Anzeige: Block;
  Höhe: Calc (1REM * var (-Basis) 1px);
  Block-Block-End: 0;
  Position: absolut;
  Breite: 100%;
}

Jetzt pass alles zusammen!

Ja, Voice -Over scheint den vollständigen Text zu respektieren. Ich habe andere Leser von anderen Bildschirmen jedoch nicht getestet.

Ich habe auch festgestellt, dass die Implementierung von MDN pointer-events von p::after entfernt. Dies kann eine gute Verteidigungsstrategie sein, um seltsames Verhalten bei der Auswahl von Text zu verhindern. Ich habe es hinzugefügt, und zumindest in Safari, Firefox und Chrom fühlt sich die Auswahl des Textes etwas glatter an.

Das obige ist der detaillierte Inhalt vonMDNs verkürzte Textwirkung neu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!