CSS ellipsis: Text abschneiden und „…“ anhängen

Die CSS3 Spezifikation ist schon etwas schönes. Ein lang ersehnter Wunsch nach dem automatischen Abschneiden von langen Textzeilen wurde Dank text-overflow endlich wahr!

Man kann text-overflow mit zwei praktischen Werten bestücken:

clip ist als initialer Wert gesetzt. Ist das umschließendes Element zu schmal, wird der Text schlicht abgeschnitten, verschwindet also hinter der Begrenzung.

ellipsis schneidet den Text ebenfalls ab, allerdings schon ein paar Pixel vor Ende der Zeile. So bleibt genügend Platz, um die bekannten drei Punkte „…“ anzufügen und dem Benutzer auf eine angenehme Art zu zeigen, dass hier eigentlich noch mehr steht.

Man kann text-overflow: ellipsis benutzen, wenn:

  1. Der Container darf nicht als overflow: visible gekennzeichnet sein (andernfalls wird der Text ganz normal angezeigt und nicht abgeschnitten)
  2. Der Container ist mit white-space: nowrap oder einer ähnlichen Eigenschaft gekennzeichnet, die den Text aus der Box herausfließen lässt (passiert bei einzelnen Wörter automatisch)

CSS3 text-overflow: ellipsis multiline

Genialerweise funktioniert das aber nicht nur einzeilig! Wir haben für ein Projekt einige Listen, wo key-value Paare dargestellt werden. Für 99% dieser Paare würde dies ausreichen, aber z.B. Zitate sollten nicht abgeschnitten, sondern auch über mehrere schmale Zeilen dargestellt werden:

CSS3 text-overflow: ellipsis mit Tooltip

Das beste kommt bekanntlich zum Schluss! Wie können wir bloß ein Tooltip erstellen, OHNE den vollständigen Inhalt noch mal in einem data-Attribut o.ä. mitzugeben? Natürlich muss das alles auch voll automatisiert geschehen… Hmm, was für Möglichkeiten bietet uns denn JavaScript?

Frei übersetzt aus dem Mozilla Developer Network:

scrollWidth ist eine ausschließlich lesbare Property, die entweder die Breite in Pixel des Contents eines Elements zurückgibt, oder die Breite des Elements selbst – je nachdem, welcher Wert größer ist.

 

clientWidth ist die innere Breite eines Elements in Pixel. Die Breite beinhaltet Padding, jedoch nicht die vertikale Scrollbar (sofern gerendert), Margin oder Border.

 

Beispiel: Ist ein Element breiter als sein Inhalt, so ist clientWidth größer als scrollWidth.

Kling gut – damit lässt sich bestimmt etwas anfangen! Im nächsten Snippet werden alle ellipsten Texte vollständig im Tooltip dargestellt, wenn man mit der Maus über den Text fährt. Der Einfachheit halber habe ich dafür das title-Attribut genutzt.


Das wars auch schon. Der Text wird nun sauber abgeschnitten, serverseitiges Eingreifen ist dafür nicht nötig – im Gegenteil eher ein sehr schlechter Stil. Wenn gewünscht, kann mit dem kleinen Script auf ein Tooltip erstellt werden, der automatisch für abgeschnittene Texte angezeigt wird.

Der Selektor ist nur für die Performance eingebaut. Es ist ja nicht nötig, dass die Prüfung für jedes Element im DOM durchgeführt wird. Im richtigen Projekt gibt es noch ein Array mit verschiedenen, typischen Selektoren, die alle geprüft werden, falls sSelector leer ist.

Was haltet ihr von dieser Lösung?

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.