Wie kann ich mit CSS linksbündige Ellipsen im Textüberlauf erreichen?

Steuerung für linksbündig ausgerichteten Text mit Auslassungspunkten

In Fällen, in denen Text innerhalb eines Containers überläuft, besteht das typische Verhalten darin, dass die Auslassungspunkte auf dem angezeigt werden rechts, der Text wird vom Ende abgeschnitten. In bestimmten Szenarien kann es jedoch wünschenswert sein, die Auslassungspunkte auf der linken Seite zu haben, um sicherzustellen, dass wichtige Informationen sichtbar bleiben.

Ein Ansatz, um linksbündige Auslassungspunkte zu erreichen, ist CSS. Das folgende Codefragment nutzt die Eigenschaften „direction“, „text-align“ und „text-overflow“:

p {
  white-space: nowrap;
  overflow: hidden;
  /* "overflow" value must be different from "visible" */
  text-overflow: ellipsis;
  width: 170px;
  border: 1px solid #999;
  direction: rtl;
  text-align: left;
}

In dieser Lösung verhindert die Eigenschaft „white-space“, dass der Text umbrochen wird, während die Eigenschaft „overflow“ das Überlaufverhalten festlegt auf „Ausgeblendet“ setzen, um sicherzustellen, dass der Inhalt abgeschnitten wird, wenn er die Containerbreite überschreitet. Die text-overflow-Eigenschaft gibt explizit die Verwendung von Auslassungspunkten zum Abschneiden an.

Die width-Eigenschaft bestimmt den maximal verfügbaren Platz für den Text. Die Eigenschaft „direction“ legt die Textausrichtung auf „rechts nach links“ (rtl) fest, und die Eigenschaft „text-align“ legt die Textausrichtung auf „links“ fest. Diese Kombination von Eigenschaften ermöglicht es, dass die Auslassungspunkte am linken Ende des Texts angezeigt werden, wenn dieser abgeschnitten wird.

Während dieser reine CSS-Ansatz eine Problemumgehung in Firefox und Chrome bietet, kann es beim Umgang mit gemischtem RTL zu Einschränkungen kommen und LTR-Inhalte. Der angegebene Wert vom Typ „Linker Überlauf“ bleibt experimentell und erfordert möglicherweise eine weitere Entwicklung, um das gewünschte Verhalten in verschiedenen Szenarien bereitzustellen.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS linksbündige Ellipsen im Textüberlauf erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!