MDNs verkürzte Textwirkung neu erstellen

lorem ipsum dolor sit amet konsistetur apisicing elit.

gleich, nichts Besonderes. Unser Ziel ist es, den Inhalt nach der dritten Zeile abzuschneiden. Wir können die max-hohe des Absatzes festlegen und den Überlaufinhalt ausblenden: Beachten Sie, dass ich ein -Base Variable Preset habe, das als gemeinsamer Multiplikator verwendet werden kann. Ich benutze es, um die Schriftgröße, die Zeilenhöhe, die Kartenfüllung und jetzt die max-Höhe 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 aufgefallen, dass MDN auch eine ähnliche -Basislinienhöhe Variable verwendet, wahrscheinlich für denselben Zweck.

Wie kann man die dritte Textzeile verblassen? Dies ist der klassische linear-Gradient () auf der Pseudoelement des Absatzes :: After , der in der unteren rechten Ecke der Karte festgelegt ist. Daher können wir es so festlegen: -Background Variable, 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 erfordert Höhe und Breite. Durch die Höhe wird die Variable -Basis wieder gespielt, da es die Zeilenhöhe des Absatzes skaliert, um den Text mit der Höhe von :: After zu überschreiben.

 .Card P :: After {/* supra*/Höhe: Calc (1REM* var (-Basis) 1px); Auch hier verwende ich nicht  Top  (oder  start-start ), um den Gradienten in diese Richtung auszugleichen. ? ‍Τrecht 
 
 Jetzt  p :: After  ist absolut positioniert, und wir müssen die relative Positionierung im Absatz explizit deklarieren, um  :: nach  in seinem Stream zu halten. Andernfalls wird  :: After  vollständig aus dem Dokumentstream entfernt und wird schließlich außerhalb der Karte angezeigt. Dies ist der vollständige CSS des  .Card  Absatz: 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 ich vermisst habe. Oh ja,  :: After  muss als Blockelement angezeigt werden. Dies ist sehr klar, wenn Sie einen roten Rand hinzufügen. ? 
 
 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  Zeiger-Events  aus  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!

firefox css chrome safari html 常量 pointer overflow 伪元素 background

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn