Kann CSS lange Zeichenfolgen abschneiden und Auslassungspunkte zuverlässig anzeigen?

Kann CSS lange Zeichenfolgen abschneiden?

Ist es möglich, Text nur mit HTML und CSS abzuschneiden, sodass dynamische Inhalte in ein vordefiniertes Format passen Design mit fester Breite und fester Höhe?

In der Vergangenheit wurde das Abschneiden von Text serverseitig basierend auf einem durchgeführt geschätzte Anzahl der Zeichen. Aufgrund der unterschiedlichen Zeichenbreiten war dieser Ansatz jedoch unzuverlässig. Um dieses Problem zu beheben, wurde nach einer browserbasierten Lösung gesucht, die die tatsächlich gerenderte Breite des Textes bestimmen konnte.

Zunächst wurde die Eigenschaft text-overflow: ellipsis des IE als mögliche Lösung identifiziert. Diese Funktion wurde jedoch von anderen Browsern, insbesondere Firefox, nicht unterstützt.

Es entstanden verschiedene CSS-basierte Problemumgehungen, die Techniken wie overflow:hidden verwendeten. Allerdings konnten diese Methoden entweder keinen Auslassungsindikator anzeigen oder zeigten ihn sogar dann an, wenn der Text nicht abgeschnitten war.

Als mögliche Lösung schlug Justin Maxwell eine browserübergreifende CSS-Technik vor, die die Verwendung einer versteckten ellipsis.xml beinhaltet Datei. Diese Methode schneidet den Text effektiv mithilfe von Auslassungspunkten ab, hat jedoch den Nachteil, dass die Textauswahl in Firefox verhindert wird.

Aktualisierte Lösung

Mit der Veröffentlichung von Firefox 7 im Jahr 2011 , Unterstützung für die Eigenschaft text-overflow: ellipsis verbreitete sich, sodass keine Problemumgehungen erforderlich waren. Diese Eigenschaft ermöglicht eine präzise Textkürzung mit einem Auslassungszeichen.

Zusätzlich wurde eine Technik entwickelt, um den Inhalt eines abgeschnittenen Knotens zu aktualisieren und gleichzeitig die Unterstützung in Firefox beizubehalten. Dabei wird die Funktion „replaceEllipsis“ verwendet, um den Knoten zu klonen und zu ersetzen, wenn sein Inhalt geändert wird.

Das obige ist der detaillierte Inhalt vonKann CSS lange Zeichenfolgen abschneiden und Auslassungspunkte zuverlässig anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!