Wie erreicht man in Safari linksseitige Textüberlauf-Ellipsen?

Linksseitige Textüberlauf-Ellipsen

Wenn Sie mit einer Liste langer Pfade arbeiten, kann es schwierig sein, diese vollständig anzuzeigen und gleichzeitig sicherzustellen, dass dies der Fall ist Wichtige Informationen auf der rechten Seite bleiben sichtbar. Um dieses Problem zu beheben, möchten Sie möglicherweise eine linksseitige Textüberlauf-Auslassungslinie implementieren, die den Anfang des Pfads abschneidet, sein Ende jedoch beibehält.

Im Gegensatz zu Browsern wie Firefox und Chrome fehlt Safari derzeit die Unterstützung dieser Funktionalität nur CSS verwenden. Allerdings kann eine Kombination von CSS-Eigenschaften als Workaround verwendet werden.

CSS-Lösung:

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 170px;
  border: 1px solid #999;
  direction: rtl;
  text-align: left;
}

Erklärung:

• white-space: nowrap verhindert, dass der Text auf mehrere Zeilen umgebrochen wird.
• overflow: versteckt verbirgt den überlaufenden Teil des Textes.
• text-overflow: ellipsis löst das Hinzufügen eines Auslassungspunktes aus, wenn der Text die verfügbare Breite überschreitet.
• width gibt die maximale Breite des Pfadcontainers an.
• Richtung: RTL erzwingt die Textrichtung von rechts nach links.
• Textausrichtung: links Richtet den Text links vom Container aus, wodurch die Auslassungspunkte effektiv links platziert werden.

Beispiel:

<p>first > second > third<br />
second > third > fourth > fifth > sixth<br />
fifth > sixth > seventh > eighth > ninth</p>

Diese CSS-Problemumgehung erreicht das Gewünschte Effekt der Anzeige einer Textüberlauf-Ellipse auf der linken Seite, wodurch sichergestellt wird, dass wichtige Informationen auf der rechten Seite auch bei längeren Pfaden sichtbar bleiben.

Das obige ist der detaillierte Inhalt vonWie erreicht man in Safari linksseitige Textüberlauf-Ellipsen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!