201224Sep

Trunk8: jQuery-Plugin für dynamische Textkürzung

Seit CSS3 kann der textliche Inhalt von Blöcken mit der Anweisung "text-overflow: ellipsis;" automatisch gekürzt werden, so dass ein eventueller Überlauf verhindert wird und stattdessen Auslassungspunkte ("…") eingefügt werden. Wer noch nicht komplett auf CSS3 zurückgreifen kann oder eine etwas dynamischere Lösung benötigt, kann sich dazu das jQuery-Plugin Trunk8 ansehen, das den gleichen Effekt erzielt und dabei den gewünschten Text auf die optimale Länge zuschneidet.

jQuery-Plugin - Trunk8

Das Plugin erlaubt es zudem, alternative Auslassungszeichen oder gar ein "Weiterlesen"-Link am Ende des gekürzten Textblocks einzufügen. Außerdem kann die Anzahl der Zeilen angegeben werden, auf die ein Text reduziert werden soll. Ein Beispiel:

  • $("#textblock").trunk8({
  • lines: 2
  • });

Trunk8 erlaubt es weiterhin, den Text eines Blocks dynamisch zu ändern. Um die Textkürzung auch beim Ändern der Fenstergröße zu aktivieren, kann das "Resizable"-Widget von jQuery UI verwendet werden. Der Download des Plugins findet sich wieder bei GitHub.