Beispielcode zum Implementieren mehrerer Zeilenauslassungen mithilfe von drei erweiterten CSS-Methoden

Vorwort

Dies ist eine alte Forderung, aber es gibt immer noch viele Leute, die online nach Lösungen suchen, insbesondere nach Lösungen mit hohen Platzierungen in den Suchergebnissen, die nur Lösungen mit -webkit-line-clamp mit schlechter Kompatibilität vorstellen.

Wenn Sie diesen Artikel sehen, bedeutet das möglicherweise, dass Sie von so vielen 08/15-Artikeln hierher gekommen sind und nach einer besseren Lösung suchen. Dann herzlichen Glückwunsch, besser geht es nicht, nur passender. Voraussetzung ist natürlich, dass mein Artikel genügend Traffic hat und nach oben gepusht werden kann, damit du die Chance hast, ihn zu sehen.

Hier sind drei Methoden zum Abschneiden von mehrzeiligem Text. Die erste ist natürlich -webkit-line-clamp Lösung, die Sie vielleicht lieber wegwerfen möchten. Wenn Sie sie nicht lesen möchten, springen Sie einfach zur zweiten Methode und beginnen Sie mit dem Lesen.

Verwenden von -webkit-line-clamp

Wenden Sie die folgenden Stile auf den mehrzeiligen Textcontainer an

div {
  Anzeige: -webkit-box;
  -webkit-box-orient: vertikal;
  Überlauf: versteckt;
  -Webkit-Leitungsklemme: 2;
}

Mit Ausnahme von -webkit-line-clamp bleiben die anderen Eigenschaften unverändert. Der Hauptzweck besteht darin, das Objekt als elastisches Boxmodell anzuzeigen und die Anordnung der untergeordneten Elemente des elastischen Boxobjekts festzulegen.

Und -webkit-line-clamp wird verwendet, um zu steuern, wie viele Zeilen weggelassen werden

Vorteil:

• Der Browser unterstützt das Auslassungsverhalten nativ und der Stil sieht komfortabel aus
• Einfach zu bedienen

Mangel:

Wie Sie am Präfix des Attributs erkennen können, wird dies von Browsern mit webkit Kernel unterstützt, die Kompatibilität ist jedoch nicht umfassend.

Anwendungsszenarien

Wenn Sie nur WebKit-basierte Browser oder Mobilgeräte ansprechen möchten (die meisten Mobilbrowser basieren auf dem WebKit-basierten Browserkernel), ist diese Lösung die beste.

Verwenden der absoluten Positionierung

Diese Lösung ist eigentlich sehr einfach zu verstehen. Zuerst reservieren wir auf der rechten Seite eines Containers, der Inhalt enthält, Platz für eine Ellipse und verwenden padding-right: 1em; um Platz zu reservieren. Warum 1em? Eine Ellipse ist fast 1em. Die Einheit em wird verwendet, um auf die Schriftgröße zu reagieren.

Verwenden Sie die absolute Positionierung, um die Auslassungspunkte in der unteren rechten Ecke des reservierten Bereichs zu positionieren.

html

<div class="wrap">Inhalt</div>

CSS

.wrap3 {
    Position: relativ;
    Polsterung rechts: 1em;
    /*max-height ist ein Vielfaches der Zeilenhöhe, abhängig davon, wie viele Zeilen Sie anzeigen möchten*/
    maximale Höhe: 3,6em;
    Zeilenhöhe: 1,2em;
    Textausrichtung: Blocksatz;
    Überlauf: versteckt;
}

.wrap3:vor {
    Position: absolut;
    rechts: 0;
    unten: 0;
    Inhalt: '...';
}

Wirkung (mehrere Inhalte):

Auf diese Weise bleiben die Auslassungspunkte immer vorhanden. Um dieses Problem zu lösen, verwenden wir ein Quadrat mit der gleichen Farbe wie der Hintergrund, um die Auslassungspunkte abzudecken. Der entscheidende Punkt ist: Woher wissen wir, wann wir es abdecken müssen und wann nicht?

Idee: Das Quadrat, das zum Blockieren der Auslassungspunkte verwendet wird, ist ebenfalls absolut positioniert, nach rechts eingestellt, right: 0 , aber bottom Wert sollte nicht eingestellt werden. Wenn nicht eingestellt, bewegt sich das Quadrat mit der tatsächlichen Höhe des Textinhalts, nicht mit der Höhe von max-height . In diesem Fall, wenn kein Grund zum Weglassen besteht (das heißt, wenn max-height nicht überschritten wird), trifft es zufällig auf bottom: 0 zu, wodurch die Auslassungspunkte blockiert werden. Wenn die Auslassungspunkte weggelassen werden sollen (d. h. max-height überschreitet), werden die Auslassungspunkte nicht blockiert und selbst durch overflow: hidden ausgeblendet.

Die endgültige Lösung lautet also:

html

<div class="wrap">Inhalt</div>

CSS

.wickeln {
    Position: relativ;
    /*Zeilenhöhe und Höhe müssen aufeinander abgestimmt sein. Die Anzahl der wegzulassenden Zeilen ist ein Vielfaches von Zeilenhöhe*/
    Zeilenhöhe: 1,2em;
    maximale Höhe: 3,6em;
    /*Diese Eigenschaft wird nach Bedarf bestimmt. Da padding-right gesetzt ist, wird mehr Platz freigegeben. Dieser Wert ist im Allgemeinen der negative Wert von padding-right*/
    /*Rand links: -1em;*/
    /*Dieser Wert sollte als 1em fest codiert werden, da die Auslassungspunkte wahrscheinlich 1em Platz beanspruchen*/
    Polsterung rechts: 1em;
    Textausrichtung: Blocksatz;
    Überlauf: versteckt;
}

.wrap:vor {
    Position: absolut;
    rechts: 0;
    unten: 0;
    Inhalt: '...';
}

.wrap:nach {
    Position: absolut;
    rechts: 0;
    /*Stellen Sie Breite und Höhe einfach auf 1em ein, da die Auslassungspunkte etwa 1em Platz beanspruchen, der zum Abdecken der Auslassungspunkte verwendet wird und im Grunde dem rechten Abstand von „wrap“ entspricht*/
    Breite: 1em;
    /*Den tatsächlichen Wert der Zeilenumbruchhöhe beibehalten*/
    Höhe: 1,2em;
    Inhalt: '';
    /*Es sollte mit der Hintergrundfarbe übereinstimmen, damit die Auslassungspunkte ohne Auffälligkeiten abgedeckt werden können*/
    Hintergrundfarbe: #fff;
}

Wirkung:

Vorteil

• Gute Kompatibilität, wird von allen gängigen Browsern unterstützt
• Adaptive Höhe, keine Notwendigkeit, die Höhe fest zu codieren, legen Sie die Anzahl der Zeilen fest, die vor der Anzeige ausgelassen werden sollen
• Adaptive Breite
• Adaptive Schriftgröße, die Schriftgröße hat keinen Einfluss auf die ursprünglichen Anforderungen, d. h. die Anzahl der Zeilen, die weggelassen werden müssen, wird weggelassen

Mangel

• Auf der rechten Seite des Textes bleibt etwas Platz für die Auslassungspunkte.
• Sie müssen die Hintergrundfarbe berücksichtigen, da die After-Pseudoklasse die Hintergrundfarbe verwendet, um die Auslassungspunkte abzudecken.

Verwenden des Float-Layouts

Diese Lösung ist für diejenigen, die nicht über solide Grundkenntnisse verfügen, möglicherweise nicht leicht zu verstehen. Wenn Sie nur eine Lösung finden und das Prinzip nicht kennen möchten, können Sie direkt zu

Bevor wir über diese Lösung sprechen, müssen wir zunächst folgendes Phänomen verstehen:

Es gibt einen solchen HTML-Abschnitt

<div Klasse="wrap">
    <div Klasse="left">Links schweben</div>
    <div class="right1">Float rechts 1Float rechts 1Float rechts 1Float rechts 1Float rechts 1Float rechts 1Float rechts 1Float rechts 1Float rechts 1Float rechts 1Float rechts 1Float rechts 1Float rechts 1Float rechts 1Float rechts 1Float rechts 1</div>
    <div class="right2">Rechts schweben 2</div>
</div>

Diesen Stil anwenden

.wickeln {
	Höhe: 100px;
}
.links {
	schweben: links;
	Breite: 60px;
	Höhe: 100%;
	Hintergrund: rosa;
}
.rechts1 {
	schweben: rechts;
	/*Verbleibende Breite des Wraps außer links belegen*/
	Breite: berechnet (100 % – 60 Pixel);
	Hintergrund: #95d9f8;
}
.rechts2 {
	schweben: rechts;
	Hintergrund: gelb;
}

Normalerweise wird es so angezeigt, wie es sich jeder im Allgemeinen vorstellen kann:

Die Bedingungen für das Auftreten dieses normalen Phänomens sind:

• Die Höhe von .right1 überschreitet nicht die Höhe von .left (d. h. weniger Inhalt)
• Die Breite von .right2 ist kleiner als die Breite von .right1

Okay, ich denke, jeder versteht diese Situation. Wenn wir dann den Inhalt von .right1 so vergrößern, dass er die Höhe des linken Floats überschreitet, geschieht Folgendes:

Right Float 2 steckt in der unteren linken Ecke fest.

Möchten Sie mich fragen, warum das passiert ist? Ähm … es scheint, dass Ihre Grundkenntnisse in Float nicht solide sind. Ich schlage vor, dass Sie Ihre Grundkenntnisse festigen. Eigentlich kann ich es nicht erklären. Ich weiß nur, dass dies eine normale Float-Leistung ist.

Die Bedingungen für das Auftreten dieses Phänomens sind:

• Die Höhe von .right1 übersteigt die Höhe von .left (d. h. mehr Inhalt)
• Die Breite von .right2 ist kleiner oder gleich der Breite von .left

Von der Umsetzung von Wissen zur Bedarfsrealisierung

Nachdem wir die beiden oben genannten Szenarien verstanden haben, wie sollten wir dieses Wissen nutzen, um die entsprechenden Bedürfnisse zu erfüllen?

Angenommen, der Textinhalt des rechten Floats 1 ist der Inhalt, den wir für mehrere Zeilen weglassen möchten, und der Inhalt des rechten Floats 2 sind die Auslassungspunkte (...). Auf diese Weise ist die Auslassungsstelle bei wenig Inhalt der oben genannte erste Fall und bei viel Inhalt der zweite Fall.

Ist diese dynamische Änderung vergleichbar mit der Änderung der Forderung „nicht weglassen, wenn der Text klein ist, weglassen, wenn der Text groß ist“? Auf dieser Grundlage müssen wir das folgende Problem lösen: Im ersten Fall wird der rechte Float 2 ausgeblendet, und im zweiten Fall wird der rechte Float 2 in der unteren rechten Ecke von .wrap angezeigt, und der Inhalt, der die Höhe überschreitet, wird ausgeblendet.

Um das obige Problem zu lösen, verwenden Sie einfach position: relative; für die relative Positionierung. .wrap wendet overflow: hidden; auf den übergeordneten Container an. Im ersten Fall wird es außerhalb des übergeordneten Containers positioniert und ist ausgeblendet. Im zweiten Fall wird es in der unteren rechten Ecke des übergeordneten Containers positioniert.

Okay, jetzt liegt der Schwerpunkt der Lösung darauf, wie das Problem genau lokalisiert werden kann (nächster Abschnitt). Bevor wir uns mit dem Positionierungsproblem befassen, wandeln wir zunächst die aktuelle Situation in einen tatsächlichen Bedarfscode um:

<!--Verwenden Sie Pseudoelemente, um die tatsächlichen Tags für den linken und rechten Float 2 zu ersetzen -->
<div Klasse="wrap">
    <div class="text">Rechts schweben 1</div>
</div>

.wickeln {
    Höhe: 100px;
    /*Zeilenhöhe wird verwendet, um die maximale Anzahl an Textzeilen zu steuern, die angezeigt werden können*/
    Zeilenhöhe: 20px;
    Überlauf: versteckt;
}
.wrap:vor {
    schweben: links;
    /* Muss größer oder gleich der Breite des nachfolgenden Elements sein*/
    Breite: 1,5em;
    Höhe: 100%;
    Inhalt: '';
}
.text {
    schweben: rechts;
    /*Verwenden Sie einen negativen linken Rand, um den durch „vorher“ entstandenen Leerraum zu vermeiden*/
    /*Denn bei tatsächlicher Nachfrage ist es unmöglich, dass die linke Seite Ihres übergeordneten Containers leer ist*/
    Rand links: -1,5em;
    /*Da ein negativer marginLeft-Wert verwendet wird, kann die Breite des Textcontainers 100 % der Breite des übergeordneten Containers einnehmen*/
    Breite: 100 %;
}
.wrap:nach {
    schweben: rechts;
    /*Im Allgemeinen sind drei Punkte etwa 1em breit. Die Verwendung von em als Einheit kann die Schriftgröße adaptiv machen*/
    Breite: 1em;
    Inhalt: '...';
}

Falls Sie sich jetzt fragen, warum .text auf width: 100%; eingestellt ist, aber : :after bei viel Inhalt immer noch unter :before hängen bleibt? Dies liegt daran, dass selbst wenn .text margin-left: -1.5em; festlegt, dies den ursprünglichen Dokumentfluss nicht beeinflusst. Er bleibt unverändert. Das Festlegen eines negativen Rands beeinflusst nur den Präsentationsstil von .text selbst.

So finden Sie

Die Lösung des Positionierungsproblems basiert auf dem Code im vorherigen Abschnitt. Die derzeit auftretenden Probleme sind:

1. Wenn wenig Inhalt vorhanden ist und dieser nicht weggelassen werden muss, werden Auslassungspunkte angezeigt.
2. Wenn zu viel Inhalt vorhanden ist, der weggelassen werden muss, verbirgt die Ellipse den

Lassen Sie uns zuerst das zweite Problem lösen.

Idee: Verschieben Sie dieses :after nach rechts neben .wrap und verschieben Sie es nach oben in die letzte Zeile.

Wenn Sie position: relative; zur Steuerung verwenden, ist top Wert leicht zu ermitteln. Nehmen Sie einfach den gleichen tatsächlichen Wert der line-height von .wrap und verwenden Sie einen negativen Wert. Entscheidend ist der linke Wert und wie dieser gewählt werden muss, damit er genau in der unteren rechten Ecke erscheint.

Wenn Sie die Breite von .text kennen (z. B. 100px), können Sie einfach left: 100px; festlegen. Dies funktioniert jedoch nur in Situationen mit fester Breite und passt sich nicht an die Breite an. Um Adaptivität zu erreichen, kann der Wert von links als Prozentsatz genommen werden. Wie hoch ist also der Prozentsatz? Das ist verworren. Nehmen Sie einfach 100 % und Sie werden feststellen, dass es aus dem übergeordneten Container verschoben wird.

Wenn es in der unteren rechten Ecke erscheinen soll, muss die Anfangsposition der Auslassungspunkte auf der linken Seite von .wrap sein, direkt neben .wrap , sodass es in der unteren rechten Ecke nach left: 100% erscheinen kann.

Nun stellt sich die Frage, wie man dafür sorgt, dass :after direkt links von .wrap erscheint. Der folgende Code ist möglicherweise für Benutzer ohne solide Grundlagen schwer zu verstehen (der neue Teil befindet sich in den Kommentaren):

.wrap:nach {
    schweben: rechts;
    /*Da der Rand unten festgelegt ist, besteht hier keine Anforderung für den Breitenwert*/
    Breite: 1em;
    Inhalt: '...';
    
    /*Diese beiden Eigenschaften werden neben der linken Seite von .wrap gesetzt*/
    /*Dieser Wert sollte der gleiche wie seine eigene Breite sein, nehmen Sie einen negativen Wert*/
    Rand links: -1em;
    /*Dieser Wert sollte derselbe sein wie die vorherige Breite*/
    Polsterung rechts: 1,5em;
    
    /*Hier befindet sich die Auslassungszeichen-Position*/
    Position: relativ;
    links: 100 %;
    /*Gleich der tatsächlichen Zeilenhöhe des übergeordneten Elementumbruchs, negativer Wert*/
    oben: -20px;
}

Was das Einstellen von Rand- und Füllwerten betrifft, wäre es am besten, wenn Sie es verstehen könnten. Wenn nicht, werde ich versuchen, es so gut wie möglich zu erklären, aber es ist wirklich schwer zu erklären.

Erstens, wenn margin-left: 1em; angewendet wird, da die Breite von :after kleiner ist als die von :before , gemäß dem ursprünglichen Float-Layout,

Rosa schwebt nach links, Blau und Rot nach rechts. Wenn die Breite der roten Farbe weiter zunimmt, bis auf den verbleibenden Platz außer der rosa Farbe, wird die blaue Farbe bis zum Zeilenumbruch zusammengedrückt und schwebt nach rechts, da in einer Zeile nicht genügend Platz ist. Wenn Sie jedoch den blauen linken Rand auf einen negativen Wert seiner eigenen Breite setzen, ist in einer Zeile immer noch Platz dafür, und es wird wie folgt

Gemäß dem obigen Prinzip kehrt :after nach dem Festlegen von margin-left: 1em; :after ersten Zeile des übergeordneten Containers zurück, neben der linken Seite des übergeordneten Containers. Wir können es jedoch nicht wieder in die erste Zeile einfügen und setzen daher padding-right: 1.5em; um den tatsächlich eingenommenen Platz so groß zu machen, dass es nicht mehr in die erste Zeile passt. Es wird an seine ursprüngliche Position unter :before zurückkehren, aber durch den Padding-Wert nach links verschoben.

Okay, ich bin mit meiner Erklärung fertig. Ob du sie verstehst oder nicht, hängt von deinem Glück ab, haha.

Es ist erwähnenswert, dass der Kommentar zur Breite im obigen Code lautet: „Da der Rand unten festgelegt ist, gibt es hier keine Anforderung für den Breitenwert.“ Früher musste er kleiner oder gleich der :before Breite sein, aber jetzt, da der negative Wert von margin-left die ursprüngliche Breite verschiebt, wird diese Anforderung in padding-right umgewandelt, was jetzt gleich ist

Zusammenfassung

Bisher wurden alle Probleme gelöst. Für alle oben diskutierten Probleme ist der folgende Code zusammengefasst (spezifische Optimierungen werden in den Kommentaren erläutert):

CSS-Stile

.wickeln {
    /*Die Höhe muss eingestellt werden*/
    Höhe: 100px;
    /*Wird verwendet, um die Anzahl der anzuzeigenden Zeilen vor dem Weglassen festzulegen. Der Wert wird im Allgemeinen durch Division des Zeilenhöhenwerts durch die Anzahl der Zeilen ermittelt, die Anzahl der Zeilen wird jedoch durch die Schriftgröße begrenzt*/
    /*Die Schriftart ist zu groß und es wird hässlich aussehen, wenn Sie sie auf die Anzeige vieler Zeilen einstellen, da diese alle zusammengequetscht werden. Der tatsächliche Wert hängt also von den jeweiligen Anforderungen und Vorgehensweisen ab*/
    Zeilenhöhe: 25px;
    /*Das Hinzufügen dieses Attributs verbessert den Anzeigeeffekt und hat keine großen Auswirkungen, auch wenn einige Browser es nicht unterstützen*/
    Textausrichtung: Blocksatz;
    Überlauf: versteckt;
}

.wrap:vor {
    schweben: links;
    /*Dieser Wert kann beliebig eingestellt werden, unabhängig von der Einheit oder anderen Faktoren*/
    Breite: 1em;
    Höhe: 100%;
    Inhalt: '';
}

.wrap:nach {
    schweben: rechts;
    /*Die Größe ist beliebig, am besten wird sie in em-Einheiten eingestellt, die sich an die Schriftgröße anpassen können*/
    /*Wenn Sie den folgenden Farbverlaufseffekt verwenden möchten, sollte dieser Wert für einen besseren Effekt größer sein als der vorherige Breitenwert*/
	/*Je größer der Wert, desto deutlicher ist der Gradienteneffekt und desto größer ist der betroffene Bereich. */
    Breite: 2,5em;
    /*Der tatsächliche px-Wert der Zeilenhöhe entspricht dem Umbruch des übergeordneten Elements*/
    Höhe: 25px;
    /*Dieser Wert sollte der gleiche wie seine eigene Breite sein, nehmen Sie einen negativen Wert*/
    Rand links: -2,5em;
    /*Dieser Wert sollte derselbe sein wie die vorherige Breite*/
    Polsterung rechts: 1em;
    Inhalt: '...';
    Textausrichtung: rechts;
    /*Hier beginnen wir, das Float-Layout zum Positionieren und Verschieben zu verwenden*/
    Position: relativ;
    /*Gleich der tatsächlichen Zeilenhöhe des übergeordneten Elementumbruchs, negativer Wert*/
    oben: -25px;
    links: 100 %;
    /*Der Farbverlaufseffekt ist so eingestellt, dass die Auslassungspunkte und der Inhalt natürlicher und nicht so abrupt miteinander verbunden werden. Achten Sie darauf, dass die Farbe mit dem Hintergrund übereinstimmt, auf dem sich der Text befindet (ersetzen Sie Weiß durch die Hintergrundfarbe)*/
    Hintergrund: #fff;
    Hintergrund: -webkit-gradient(linear, links oben, rechts oben, von(rgba(255, 255, 255, 0)), bis(weiß), Farbstopp(50%, weiß));
    Hintergrund: -moz-linear-gradient (nach rechts, rgba (255, 255, 255, 0), weiß 50 %, weiß);
    Hintergrund: -o-linear-gradient (nach rechts, rgba (255, 255, 255, 0), weiß 50 %, weiß);
    Hintergrund: -ms-linear-gradient (nach rechts, rgba (255, 255, 255, 0), weiß 50 %, weiß);
    Hintergrund: linearer Farbverlauf (nach rechts, rgba (255, 255, 255, 0), weiß 50 %, weiß);
}

.wrap .text {
    schweben: rechts;
    /*Dieser Wert muss dem Breitenwert von wrap:before entsprechen*/
    Rand links: -1em;
    Breite: 100 %;
}

html-Datei:

<div Klasse="wrap">
    <span class="text">
        Beispiel 2: Verteilen Sie die Lösung für das Problem der Entwicklung und des Austauschs von Mobiltelefonen
</div>

Wirkung:

Vorteil

• Gute Kompatibilität, kann von Browsern unterstützt werden, die nicht auf WebKit basieren
• Adaptive Breite

Mangel

• Feste Höhe, keine Anpassung der Höhe möglich, daher ist auch die Anzahl der angezeigten Zeilen durch die Schriftgröße begrenzt
• Sie müssen den Text in ein Tag einschließen, um den Stil festzulegen
• Aus der Perspektive des Lesens des Stilcodes ist es nicht leicht zu verstehen
• Wenn das Element, in dem sich die Auslassungspunkte befinden, keinen Hintergrund mit Farbverlauf verwendet, kann es abrupt abgeschnitten erscheinen. Wenn ein Hintergrund mit Farbverlauf verwendet wird, achten Sie darauf, dass die Farbe mit dem Hintergrund übereinstimmt, in dem sich der Text befindet.

Zusammenfassen

Tatsächlich gibt es keine Garantie dafür, welcher Plan besser ist, sondern nur, ob er für Sie geeignet ist. Wenn Sie aufgefordert werden, Obst zu schälen, nehmen Sie einfach ein Obstmesser, es ist nicht nötig, ein großes Messer zu verwenden. Es stehen Ihnen also immer drei Optionen zur Verfügung, die Ihren Anforderungen entsprechen.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.