Mehrere Möglichkeiten, „Textüberlaufkürzung und -auslassung“ mit reinem CSS zu implementieren

In unserer täglichen Entwicklungsarbeit sind Textüberläufe, Textkürzungen und Textauslassungen sehr häufige Details in Geschäftsszenarien, die berücksichtigt werden müssen. Es sieht „üblich“ aus, aber es gibt unterschiedliche Unterschiede bei der Implementierung. Handelt es sich um einzeilige oder mehrzeilige Kürzung? Erfolgt die Kürzungsentscheidung bei mehreren Zeilen nach der Zeilenanzahl oder nach der Zeilenhöhe? Was sind die Lösungen für diese Probleme? Was sind die Unterschiede zwischen ihnen und ihre Anpassungsfähigkeit an unterschiedliche Szenarien?

Wenn wir diese Art von Textkürzungseffekt durchführen, erhoffen wir uns im Allgemeinen Folgendes:

• Gute Kompatibilität und gute Unterstützung für die wichtigsten Browser
• Reaktionsschnelle Cutoffs zur Anpassung an unterschiedliche Breiten
• Die Auslassungspunkte werden nur angezeigt, wenn der Text den Bereich überschreitet, andernfalls werden sie nicht angezeigt
• Die Auslassungspunkte werden genau richtig angezeigt

Basierend auf den oben genannten Kriterien werden wir anhand von Codierungsübungen einige Antworten geben.

Auslassungspunkte für einzeiligen Textüberlauf

Grundlegende CSS-Anweisungen

• Überlauf: ausgeblendet; (Wenn die Textlänge die angegebene Breite überschreitet, wird der überschüssige Inhalt ausgeblendet.)
• white-space: nowrap; (legt den Text so fest, dass er in einer Zeile angezeigt wird und nicht umbrochen werden kann)
• Textüberlauf: Auslassungspunkte; (gibt an, dass bei einem Textüberlauf Auslassungspunkte angezeigt werden, um abgeschnittenen Text darzustellen)

Vorteil

• Gute Kompatibilität und gute Unterstützung für die wichtigsten Browser
• Reaktionsschnelle Cutoffs zur Anpassung an unterschiedliche Breiten
• Die Auslassungspunkte werden nur angezeigt, wenn der Text den Bereich überschreitet, andernfalls werden die Auslassungspunkte nicht angezeigt
• Die Auslassungspunkte werden genau richtig angezeigt

Mängel

• Es wird nur die Kürzung einzeiliger Texte unterstützt, nicht die Kürzung mehrzeiliger Texte.

Anwendbare Szenarien

• Gilt für den Fall, dass eine einzelne Textzeile überläuft und Auslassungspunkte anzeigt.

Demo

<div Klasse="Demo">
      Das Mondlicht ist hell vor dem Bett. Das Mondlicht ist hell vor dem Bett. Das Mondlicht ist hell vor dem Bett. Das Mondlicht ist hell vor dem Bett. Das Mondlicht ist hell vor dem Bett. Das Mondlicht ist hell vor dem Bett. Das Mondlicht ist hell vor dem Bett.</div>

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

Effektbeispiele

Auslassungspunkte für mehrzeiligen Textüberlauf (-webkit-line-clamp)

Grundlegende CSS-Anweisungen

• overflow: hidden; (Text überschreitet die angegebene Breite und der Inhalt wird ausgeblendet)
• -webkit-line-clamp: 2; (wird verwendet, um die Anzahl der in einem Blockelement angezeigten Textzeilen zu begrenzen. 2 bedeutet, dass maximal 2 Zeilen angezeigt werden. Um diesen Effekt zu erzielen, muss es mit anderen WebKit-Eigenschaften kombiniert werden.)
• Anzeige: -webkit-box; (wird in Verbindung mit -webkit-line-clamp: 2; verwendet, um das Objekt als elastisches Boxmodell anzuzeigen)
• -webkit-box-orient: vertikal; (wird in Verbindung mit -webkit-line-clamp: 2 verwendet; um die Anordnung der untergeordneten Elemente des Flexbox-Objekts festzulegen oder abzurufen)
• Textüberlauf: Auslassungspunkte; (Verwenden Sie bei mehrzeiligem Text Auslassungspunkte „…“, um den Text auszublenden, der den Bereich überschreitet.)
  

Vorteil

• Reaktionsschnelle Cutoffs zur Anpassung an unterschiedliche Breiten
• Die Auslassungspunkte werden nur angezeigt, wenn der Text den Bereich überschreitet, andernfalls werden die Auslassungspunkte nicht angezeigt
• Der Browser implementiert es nativ, sodass die Auslassungspunkte an der richtigen Position angezeigt werden

Mängel

Allgemeine Kompatibilität: Die Eigenschaft -webkit-line-clamp wird nur von Browsern mit WebKit-Kernel unterstützt.

Anwendbare Szenarien

Vor allem für mobile Seiten geeignet, da die Browser mobiler Geräte eher auf dem WebKit-Kernel basieren

Demo

<div Klasse="Demo">
      Das Mondlicht ist hell vor dem Bett. Das Mondlicht ist hell vor dem Bett. Das Mondlicht ist hell vor dem Bett. Das Mondlicht ist hell vor dem Bett. Das Mondlicht ist hell vor dem Bett. Das Mondlicht ist hell vor dem Bett. Das Mondlicht ist hell vor dem Bett. Das Mondlicht ist hell vor dem Bett. Das Mondlicht ist hell vor dem Bett. Das Mondlicht ist hell vor dem Bett. Das Mondlicht ist hell vor dem Bett. Das Mondlicht ist hell vor dem Bett. Das Mondlicht ist hell vor dem Bett.

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

Effektbeispiele

Auslassungspunkte für mehrzeiligen Textüberlauf (Pseudoelement + Positionierung)

Grundlegende CSS-Anweisungen

• Position: relativ; (absolute Positionierung für Pseudoelemente)
• overflow: hidden; (Text überschreitet die angegebene Breite und der Inhalt wird ausgeblendet)
• position: absolute; (geben Sie mit den Auslassungspunkten die absolute Positionierung an)
• Zeilenhöhe: 18px; (Kombiniert mit der Elementhöhe. Wenn die Höhe festgelegt ist, legen Sie die Zeilenhöhe fest, um die Anzahl der angezeigten Zeilen zu steuern.)
• Höhe: 36px; (aktuelle Elementhöhe festlegen)
• ::nach {} (Auslassungspunktestil festlegen)
• Wortumbruch: alles umbrechen; (Wenn der Text Englisch enthält, kann beim Umbruch in eine neue Zeile ein Wortumbruch erfolgen.)
  

Vorteil

• Gute Kompatibilität und gute Unterstützung für die wichtigsten Browser
• Reaktionsschnelle Cutoffs zur Anpassung an unterschiedliche Breiten

Mängel

• Die Länge des Textes kann nicht erkannt werden. Unabhängig davon, ob der Text den Bereich überschreitet, werden immer Auslassungspunkte angezeigt.
• Die Anzeige ist möglicherweise nicht genau richtig, manchmal ist die Hälfte des Textes abgedeckt und der Text ist nicht eng verbunden

Anwendbare Szenarien

Es gibt viel Textinhalt, und es ist sicher, dass der Textinhalt den Container überschreitet

Demo

<div Klasse="Demo">
      Das Mondlicht vor dem Bett Das Mondlicht vor dem Bett Das Mondlicht vor dem Bett Das Mondlicht vor dem Bett Das Mondlicht vor dem Bett Das Mondlicht vor dem Bett Das Mondlicht vor dem Bett Das Mondlicht vor dem Bett Das Mondlicht vor dem Bett Das Mondlicht vor dem Bett Das Mondlicht vor dem Bett Das Mondlicht vor dem Bett Das Mondlicht vor dem Bett Das Mondlicht vor dem Bett Das Mondlicht vor dem Bett Das Mondlicht vor dem Bett Das Mondlicht vor dem Bett Das Mondlicht vor dem Bett Das Mondlicht vor dem Bett Das Mondlicht vor dem Bett Das Mondlicht vor dem Bett Das Mondlicht vor dem Bett

.demo {
    Position: relativ;
    Zeilenhöhe: 18px;
    Höhe: 36px;
    Überlauf: versteckt;
    Wörtertrennung: alles trennen;
}
.demo::nach {
    Inhalt:"...";
    Schriftstärke: fett;
    Position: absolut;
    unten: 0;
    rechts:0;
    Polsterung: 0 20px 1px 45px;
    
    /* Für einen besseren Anzeigeeffekt */
    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ß);
}

Effektbeispiele

Auslassungspunkte für mehrzeiligen Textüberlauf (Float)

Grundlegende CSS-Anweisungen

• Zeilenhöhe: 20px; (kombiniert mit der Elementhöhe. Wenn die Höhe festgelegt ist, legen Sie die Zeilenhöhe fest, um die Anzahl der angezeigten Zeilen zu steuern.)
• overflow: hidden; (Text überschreitet die angegebene Breite und der Inhalt wird ausgeblendet)
• Float: rechts/links; (implementiert durch Ausnutzung der Floating-Eigenschaften von Elementen)
• Position: relativ; (Verschieben Sie die Auslassungspunkte entsprechend ihrer eigenen Position, um den Effekt zu erzielen, dass die Auslassungspunkte angezeigt werden, wenn der Text überläuft.)
• Wortumbruch: alles umbrechen; (Wenn der Text Englisch enthält, kann ein Wort an den Zeilenumbrüchen getrennt werden)
  

Vorteil

• Gute Kompatibilität und gute Unterstützung für die wichtigsten Browser
• Reaktionsschnelle Cutoffs zur Anpassung an unterschiedliche Breiten
• Die Auslassungspunkte werden nur angezeigt, wenn der Text den Bereich überschreitet, andernfalls werden die Auslassungspunkte nicht angezeigt

Mängel

Die Auslassungspunkte werden möglicherweise nicht richtig angezeigt, bedecken manchmal die Hälfte des Textes und passen nicht genau zum Text

Anwendbare Szenarien

Es gibt viel Textinhalt, und es ist sicher, dass der Textinhalt den Container überschreitet

Demo

<div Klasse="Demo">
      <div Klasse="Text">
        Das Mondlicht ist hell vor dem Bett. Das Mondlicht ist hell vor dem Bett. Das Mondlicht ist hell vor dem Bett. Das Mondlicht ist hell vor dem Bett. Das Mondlicht ist hell vor dem Bett. Das Mondlicht ist hell vor dem Bett. Das Mondlicht ist hell vor dem Bett. Das Mondlicht ist hell vor dem Bett. Das Mondlicht ist hell vor dem Bett. Das Mondlicht ist hell vor dem Bett. Das Mondlicht ist hell vor dem Bett. Das Mondlicht ist hell vor dem Bett.
</div>

.demo {
  Höhe: 40px;
  Zeilenhöhe: 20px;
  Überlauf: versteckt;
}
.demo .text {
  schweben: rechts;
  Rand links: -5px;
  Breite: 100 %;
  Wörtertrennung: alles trennen;
}
.demo::vor {
  schweben: links;
  Breite: 5px;
  Inhalt: "";
  Höhe: 40px;
}
.demo::nach {
  schweben: rechts;
  Inhalt: "...";
  Höhe: 20px;
  Zeilenhöhe: 20px;
  Polsterung rechts: 5px;
  Textausrichtung: rechts;
  Breite: 3em;
  Rand links: -3em;
  Position: relativ;
  links: 100 %;
  oben: -20px;
  Polsterung rechts: 5px;
    
  /* Für einen besseren Anzeigeeffekt */
  Hintergrund: -webkit-gradient(
    linear,
    links oben,
    rechts oben,
    von(rgba(255, 255, 255, 0)),
    zu (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ß
  );
}

Effektbeispiele

Damit ist dieser Artikel über verschiedene Methoden zur Implementierung von „Textüberlauf, -kürzung und -ellipse“ mit reinem CSS abgeschlossen. Weitere relevante CSS-Inhalte zu Textüberlauf, -kürzung und -ellipse finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!