Heim > Web-Frontend > CSS-Tutorial > Wie erreicht man mit CSS linksbündige Ellipsen in Breadcrumb-Trails?

Wie erreicht man mit CSS linksbündige Ellipsen in Breadcrumb-Trails?

Barbara Streisand
Freigeben: 2024-12-09 11:57:11
Original
469 Leute haben es durchsucht

How to Achieve Left-Aligned Ellipsis in Breadcrumb Trails with CSS?

Linksbündige Textauslassungspunkte in Breadcrumb Trails

In vielen Anwendungen werden Breadcrumb Trails verwendet, um hierarchische Navigationspfade anzuzeigen. Wenn Pfade zu lang werden, um bequem in ihren übergeordneten Elementen angezeigt zu werden, kann text-overflow: ellipsis verwendet werden, um den Text abzuschneiden. Diese Kürzung erfolgt jedoch normalerweise auf der rechten Seite der Zeichenfolge, wodurch möglicherweise wichtige Informationen verdeckt werden.

Nur ​​CSS-Lösung

Um linksbündige Auslassungspunkte zu erreichen, werden CSS-Eigenschaften verwendet wie Richtung, Textausrichtung und Textüberlauf können verwendet werden. Betrachten Sie beispielsweise den folgenden Ausschnitt (angepasst aus der bereitgestellten jsFiddle):

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

Wie es funktioniert

  • white-space: nowrap; verhindert, dass Leerzeichen den Text umbrechen und stellt sicher, dass die Spuren in einer einzigen Zeile bleiben.
  • overflow: versteckt; verbirgt jeglichen überlaufenden Text, einschließlich der Auslassungspunkte.
  • text-overflow: ellipsis; kürzt den Text und fügt am Ende Auslassungspunkte hinzu.
  • width: 170px; legt die maximale Breite des Trails fest.
  • Richtung: rtl; Erzwingt, dass der Text von rechts nach links gerendert wird (umgekehrte Richtung).
  • text-align: left; Richtet den Text innerhalb der angegebenen Breite nach links aus.

JS-Lösung (in der bereitgestellten Antwort nicht verfügbar)

Obwohl nicht ausdrücklich angefordert, eine JS-Lösung kann zusätzliche Flexibilität bieten, insbesondere beim Umgang mit gemischten RTL- und LTR-Inhalten. Ein Ansatz besteht darin, die Eigenschaft text-overflow-mode zu nutzen, wenn auch mit bestimmten Vorbehalten und Einschränkungen:

document.querySelectorAll("p").forEach((p) => {
  p.style.textOverflowMode = "clip";
  p.style.direction = "rtl";
  p.style.textAlign = "left";
});
Nach dem Login kopieren

Überlegungen

Während dieser Ansatz das beschriebene spezifische Problem anspricht Bei der Frage ist es wichtig, mögliche Nachteile zu beachten:

  • Nicht alle Browser unterstützen das vollständig text-overflow-mode-Eigenschaft.
  • Einige Browser können Rendering-Macken aufweisen, insbesondere beim Mischen von RTL- und LTR-Inhalten.

Trotz dieser Einschränkungen bieten die bereitgestellten Lösungen praktische Möglichkeiten, das Problem zu beheben Herausforderung linksbündiger Auslassungspunkte in Breadcrumb-Trails, um sicherzustellen, dass wichtige Informationen zugänglich bleiben.

Das obige ist der detaillierte Inhalt vonWie erreicht man mit CSS linksbündige Ellipsen in Breadcrumb-Trails?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage