Wie kann ich Textüberlauf-Auslassungspunkte auf der linken Seite anzeigen?

Textüberlauf-Ellipse auf der linken Seite:

Es kann vorkommen, dass Sie eine Liste mit Pfaden oder Textwerten haben, die den Wert überschreiten Anzeigebreite. Um dieses Problem zu beheben, möchten Sie möglicherweise die Eigenschaft text-overflow implementieren, um den Text abzuschneiden. Nehmen wir jedoch an, dass sich die entscheidenden Informationen am Ende des Textes befinden. In diesem Fall möchten Sie, dass die Auslassungspunkte auf der linken Seite angezeigt werden, um sicherzustellen, dass der Inhalt ganz rechts sichtbar bleibt.

Die Lösung für dieses Problem finden Sie in der bereitgestellten JavaScript-Geige. Hier wird eine Kombination aus Richtungs-, Textausrichtungs- und Textüberlaufeigenschaften verwendet. Es ist erwähnenswert, dass es laut MDN-Dokumentation in Zukunft möglicherweise eine Option geben wird, die Positionierung der Auslassungspunkte auf der linken Seite mithilfe des Überlauftyps anzugeben. Diese Funktion gilt jedoch noch als experimentell.

1. Richtung: Diese Eigenschaft passt die Textrichtung mithilfe von Direction:rtl; an von rechts nach links (RTL).
2. Text-align: Die text-align-Eigenschaft richtet den Text innerhalb seines übergeordneten Elements am aus links.
3. Textüberlauf: Die Textüberlaufeigenschaft ist auf Auslassungspunkte gesetzt. Dadurch wird der Text effektiv abgeschnitten und Auslassungspunkte angezeigt, wenn der Text über die Breite des Elements hinausgeht.

Hier ist die bereitgestellte JS-Geige zur weiteren Veranschaulichung:

JavaScript Geige

CSS:

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

HTML:

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

Das obige ist der detaillierte Inhalt vonWie kann ich Textüberlauf-Auslassungspunkte auf der linken Seite anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!