CSS-Ellipse Beginn der Zeichenfolge

Von David Walsh am 17. Dezember 2018

  • 6

Ich war unglaublich glücklich, als CSS text-overflow: ellipsis (verheiratet mit festem width und overflow: hidden war Mit der Funktion, die in die CSS-Spezifikation und die Browser eingeführt wurde, konnten wir aufhören, die JavaScript-Breitenberechnung mit der Berechnung und dem Abschneiden der Zeichenfolgenbreite zu verbinden. Die CSS-Auslassungspunkte waren auch für die Barrierefreiheit sehr benutzerfreundlich Die Funktion ist großartig, soll aber im Wesentlichen die Zeichenfolgen nur am Ende ellipsen. Was ist, wenn wir den Anfang eines Bildschirms ellipsen möchten? Der Anwendungsfall ist ziemlich vernünftig: Denken Sie daran, einen Dateipfad anzuzeigen – ein Vielfaches des Verzeichnisses für eine Reihe von Dateien ist das gleiche, in diesem Fall möchten Sie das Ende der Zeichenfolge anzeigen, nicht den Anfang. Lassen Sie mich Ihnen einen Trick für Auslassungspunkte beim Betteln der Zeichenfolge zeigen!

Das CSS

Anzeigen einer Auslassungspunkte an der Vorderseite einer Schnur ist mos Dies entspricht der Ellipse am Ende, nur mit einem einfachen Trick: Um eine Ellipse am Anfang eines Strings hinzuzufügen, verwenden Sie RTL und text-align, um den Anfang des Strings zu schneiden! Das Abspielen von RTL aus text-align ist eine geniale Methode, um den gewünschten Effekt der CSS-Ellipse am Anfang eines Elements oder einer Zeichenfolge zu erzielen. Es wäre großartig für die CSS-Spezifikation, ein robusteres Ellipsensystem zu implementieren, aber im Moment verehre ich erstaunliche CSS-Tricks wie diesen!

Write a Comment

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.