Reines CSS-Problem mit benutzerdefinierten mehrzeiligen Auslassungspunkten (vom Prinzip bis zur Implementierung)

Wie wird ein Textüberlauf angezeigt? Was sind Ihre Anforderungen? Einzeilig oder mehrzeilig? Kürzung, Auslassungspunkte, benutzerdefinierter Stil, adaptive Höhe? Die Antworten finden Sie hier. Als Nächstes werde ich vom Oberflächlichen zum Tiefgründigen vorgehen, vom Prinzip zur Umsetzung, und Sie Schritt für Schritt an die Lösung des Schleier der mehrzeiligen Auslassungspunkte heranführen. Beginnen wir mit der einfachsten einzeiligen Überlaufellipse.

Aufwärmen, einzelne Zeile ausgelassen

Dies ist eine einheitliche Lösung für das gesamte Universum, ohne zu viel Magie

/* Prinzip: Stellen Sie den Text so ein, dass er nicht umbrochen wird, verbergen Sie ihn nach dem Überlauf und kürzen Sie ihn, um die Auslassungspunkte anzuzeigen*/
.ellipsis {
  Leerzeichen: Nowrap;
  Textüberlauf: Auslassungspunkte;
  Überlauf: versteckt;
}

Wie erreiche ich Auslassungspunkte in mehreren Zeilen? Beginnen wir mit der einfachsten line-clamp .

Die einfachste mehrzeilige Ellipse, Zeilenklemme

Mit der CSS-Eigenschaft -webkit-line-clamp kann der Inhalt in einem Blockcontainer auf eine bestimmte Zeilenanzahl begrenzt werden.

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

Das Präfix -webkit der Eigenschaft zeigt uns, dass die Dinge nicht einfach zu sein scheinen. Ja, es werden nur Browser unterstützt, die auf webkit Kernel basieren, der sehr mobilgerätefreundlich ist. Auf Geräten mit Android 2.3+ und iOS 5.0+ können Sie den obigen Code problemlos direkt einfügen, aber wenn Sie ihn auf dem PC verwenden möchten, müssen Sie auf Kompatibilitätsprobleme achten.

Zusätzlich zu PC-Kompatibilitätsproblemen unterstützt die line-clamp -Lösung keine benutzerdefinierten Ellipsenstile. Wenn Sie nach den Ellipsen benutzerdefinierte Stile wie Text, Pfeile usw. hinzufügen müssen, müssen wir möglicherweise andere Lösungen in Betracht ziehen, z. B.: schwebend.

Die Magie des Schwebens

Was! Können durch Schweben auch mehrzeilige Auslassungspunkte erreicht werden? Ja, unten verwenden wir drei Float-Boxen, um mehrzeilige Auslassungspunkte zu simulieren. Bereiten Sie zunächst drei Felder (Textfeld, Platzhalterfeld, Ellipsenfeld im benutzerdefinierten Stil) vor, die nach rechts schweben. Um das Prinzip leichter verständlich zu machen, fügen wir den Feldern unterschiedliche Hintergrundfarben hinzu.

<div Klasse="Box">
  <!-- Textfeld -->
  <div class="box__text">Tencent bereichert das Leben von Internetnutzern mit Technologie. Über die Kommunikations- und Social-Software WeChat und QQ fördern wir die Benutzerverbindungen und ermöglichen ihnen den Zugriff auf digitale Inhalte und Life-Services auf Knopfdruck. </div>
  <!-- Platzhalterfeld -->
  <div Klasse="box__placeholder"></div>
  <!-- Benutzerdefiniertes Auslassungsfeld -->
  <div class="box__more">... erweitern</div>
</div>

<Stil>
  .box__text {
    Breite: 100 %;
    Höhe: 60px;
    Zeilenhöhe: 20px;
    Hintergrundfarbe: rosa;
    schweben: rechts;
  }

  .box__placeholder {
    Breite: 60px;
    Höhe: 60px;
    Hintergrundfarbe: grau;
    Deckkraft: 0,8;
    schweben: rechts;
  }

  .box__mehr {
    Breite: 60px;
    Textausrichtung: rechts;
    Hintergrund: gelb;
    schweben: rechts;
  }
</Stil>

Als Nächstes beginnen wir mit der Anpassung der Position, indem wir dem Textfeld einen negativen linken Rand zuweisen, dessen Wert genau der Breite des Platzhalterfelds entspricht.

.box__text {
  Rand links: -60px;
}

Dadurch wird dem Platzhalterfeld Platz gegeben und es schwebt nach links, in einer Linie mit dem Textfeld.

Im obigen Bild ist die Höhe des Textfelds kleiner als die Höhe des Platzhalterfelds. Zu diesem Zeitpunkt entspricht die Höhe der ersten Zeile der Höhe des Platzhalterfelds. In der ersten Zeile ist kein zusätzlicher Platz vorhanden, und unser benutzerdefiniertes Auslassungsfeld kann nur in der zweiten Zeile platziert werden. Stellen Sie sich vor, was passiert, wenn die Höhe des Textfelds größer ist als die Höhe des Platzhalterfelds (wenn der Text beispielsweise 4 Zeilen umfasst)?

Die Höhe der ersten Zeile wird durch das Textfeld erweitert. Zu diesem Zeitpunkt ist in der ersten Zeile zusätzlicher Platz vorhanden und das Auslassungsfeld kann hineingequetscht werden.

Genial 😊. Als nächstes positionieren Sie das Auslassungsfeld einfach rechts, in derselben Zeile wie das Platzhalterfeld.

.box__mehr {
  Position: relativ;
  links: 100 %;
  transformieren: übersetzen(-100 %, -100 %);
}

Ändern Sie es, entfernen Sie die Hintergrundfarbe, stellen Sie den Container auf „Überlauf ausgeblendet“ und fügen Sie dann dem Auslassungsfeld eine Textfarbe und einen Farbverlauf hinzu.

.Kasten {
  Position: relativ;
  Überlauf: versteckt;
}

.box__mehr {
  Farbe: #1890ff;
  Hintergrundbild: linearer Farbverlauf (nach links, weiß 40 %, rgba(255, 255, 255, 0,8) 70 %, transparent 100 %);
}

Zusammenfassend lässt sich sagen, dass hier tatsächlich die Prinzipien des Floatings und des BFC zum Einsatz kommen.

Die äußere Box erzeugt einen BFC durch overflow: hidden . Der Bereich der schwebenden Box überlappt sich nicht mit dem BFC. Bei der Berechnung der Höhe des BFC werden auch die schwebenden Elemente in die Berechnung einbezogen. Die schwebende Box schwebt zum Anfang oder Ende der aktuellen Zeile. Mithilfe einiger Positionierungstechniken kann der Effekt mehrerer Zeilenellipsen simuliert werden.

Die Vorteile der schwimmenden Lösung liegen auf der Hand.

• Starke Kompatibilität, unterstützt alle gängigen PC- und Mobilbrowser
• Unterstützt benutzerdefinierten Textellipsenstil mit Farbverlauf

Da der ausgelassene Stilbereich im Wesentlichen ein schwebender Kasten ist, müssen wir einen Farbverlauf verwenden, um zu verhindern, dass er sichtbar wird. Diese Lösung schlägt bei Bereichen mit komplexen Hintergrundfarben oder strengeren benutzerdefinierten Anforderungen an den ausgelassenen Stil fehl (wenn der ausgelassene Stil beispielsweise als Pfeil oder Bild definiert ist).

Gibt es eine andere Möglichkeit, den ausgelassenen Stil vollständig anzupassen?

Ja, für benutzerdefinierte Auslassungspunktefelder ist ein Platz reserviert.

Wie reservieren Sie es? Wir können line-clamp verwenden. Die von line-clamp abgeschnittenen Auslassungspunkte können uns helfen, Platz zu sparen ... Wenn wir die Standard-Auslassungspunkte irgendwie ausblenden und durch unsere benutzerdefinierte schwebende Box ersetzen könnten, wäre das ausreichend! Dies ist die Lösung, die wir als nächstes vorstellen werden.

Vollständig anpassbar, Schwimmer + Leitungsklemme

Lassen Sie uns die obigen Ideen neu ordnen. Es gibt drei wichtige Punkte:

Mithilfe der Standardellipse von line-clamp reservieren wir einen Platz für unser benutzerdefiniertes Ellipsenfeld. Wir versuchen, die Standardellipse auszublenden und den reservierten Platz mithilfe der Positionierungstechnologie durch unser benutzerdefiniertes Ellipsenfeld zu ersetzen.

Sehen wir sie uns der Reihe nach an. Zuerst der reservierte Platz. Die Standardgröße der Auslassungspunkte line-clamp wird von der font-size beeinflusst, daher kann durch Anpassen der Schriftgröße die Größe des reservierten Platzes gesteuert werden. Um sicherzustellen, dass die Größe der Auslassungspunkte nur von der Schriftgröße beeinflusst wird, können wir die Zeilenhöhe und den Textabstand zurücksetzen.

.box__text {
  Position: relativ;
  Anzeige: -webkit-box;
  -Webkit-Leitungsklemme: 3;
  -webkit-box-orient: vertikal;
  Schriftgröße: 60px;
  Zeilenhöhe: 0;
  letter-spacing: 0; /* Setzt die Zeilenhöhe und den Textabstand zurück, um sicherzustellen, dass die Auslassungspunkte nur von der Schriftgröße beeinflusst werden*/
  Farbe: rot; /* Zur Vereinfachung der Demonstration geben wir den Auslassungspunkten zuerst eine Farbe*/
}

Auf diese Weise können Sie die Größe des reservierten Auslassungsfelds steuern, indem Sie nur die Schriftgröße des Textfelds anpassen. Da font-size übernommen wird, betten wir eine Unterbox ein, um die Schriftgröße zurückzusetzen.

<div Klasse="box__text">
    <div Klasse="box__inner">
      Tencent bereichert das Leben von Internetnutzern mit Technologie. Über die Kommunikations- und Social-Software WeChat und QQ fördern wir die Benutzerverbindungen und ermöglichen ihnen den Zugriff auf digitale Inhalte und Life-Services auf Knopfdruck.
    </div>
</div>

<Stil>
  .box__inner {
    Schriftgröße: 16px;
    Zeilenhöhe: 20px;
    Farbe: #000;
    vertikale Ausrichtung: oben;
    Anzeige: inline;
  }
</Stil>

Der nächste Schritt besteht darin, einen Weg zu finden, die Auslassungspunkte auszublenden. Dies ist relativ einfach. Sie können die Transparenz oder Farbtransparenz einstellen.

.box__text {
  Deckkraft: 0;
  Farbe: transparent;
}

Da wir nun den reservierten Platz für die Auslassungspunkte haben, müssen wir einen Weg finden, das benutzerdefinierte Auslassungsfeld im reservierten Platz zu positionieren. Was sollen wir tun? Schwebt immer noch. Da -webkit-line-clamp gesetzt ist, kann das Textfeld nicht auf seine volle Höhe erweitert werden. Um Floating zur Positionierung zu verwenden, können wir eine zusätzliche Kopie rendern, um die Höhe zu erweitern.

Bereiten Sie eine absolut positionierte Box als Container zum Rendern der Kopie mit erweiterter Höhe vor.

<div Klasse="box__abs">
    <div Klasse="box__fake-text">
      Tencent bereichert das Leben von Internetnutzern mit Technologie. Über die Kommunikations- und Social-Software WeChat und QQ fördern wir die Benutzerverbindungen und ermöglichen ihnen den Zugriff auf digitale Inhalte und Life-Services auf Knopfdruck.
    </div>
    <div Klasse="box__placeholder"></div>
    <div class="box__more">... erweitern</div>
</div>

<Stil>
  .box__abs {
    Position: absolut;
    oben: 0;
    links: 0;
    Breite: 100 %;
  }
</Stil>

Als Nächstes verwenden wir die drei zuvor erwähnten schwebenden Boxen, um mehrzeilige Überlaufellipsen zu implementieren.

.box__fake-text {
  Breite: 100 %;
  Rand links: -60px;
  Zeilenhöhe: 20px;
  schweben: rechts;
  Farbe: transparent; /* Die Höhe des Textes soll erweitert werden, und in Zusammenarbeit mit Floating kann so ein mehrzeiliger Überlauf vermieden werden*/
}

.box__placeholder {
  Breite: 60px;
  Höhe: 60px;
  schweben: rechts;
}

.box__mehr {
  Position: relativ;
  links: 100 %;
  transformieren: übersetzen(-100 %, -100 %);
  Breite: 60px;
  Textausrichtung: rechts;
  Farbe: #1890ff;
  schweben: rechts;
}

Es ist zu beachten, dass das Textfeld hier die Höhe erweitern soll und nicht angezeigt werden muss, daher haben wir die Farbe auf transparent eingestellt. Okay, der letzte Schritt besteht darin, die Hintergrundfarbe zu entfernen und den Überlauf der äußeren Box auf „Ausblenden“ zu setzen. Dies ist unser letzter Effekt.

line-clamp + Floating-Methode können Sie die Auslassungspunkte vollständig anpassen. Wir setzen die Zeilenhöhe und den Textabstand zurück. Sie müssen nur font-size des äußeren Felds anpassen, um die Breite des benutzerdefinierten Auslassungsfelds zu steuern. Sie können das Auslassungsfeld durch einen beliebigen Pfeil, ein beliebiges Bild, eine beliebige Ecke oder einen beliebigen Text ersetzen. Jetzt müssen Sie sich keine Gedanken mehr über die Anforderungen des UI-Girls machen):

Damit ist dieser Artikel über reine CSS-benutzerdefinierte mehrzeilige Auslassungspunkte (vom Prinzip bis zur Implementierung) abgeschlossen. Weitere relevante CSS-Inhalte zu benutzerdefinierten mehrzeiligen Auslassungspunkten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!