Teaser mit jQuery erstellen

Heutzutage besitzt fast jede halbwegs ernst zu nehmende Webapp ein Mini-CMS im Backend. Meistens basierend auf einem WYSIWYG-Editor in JavaScript. Eigentlich eine sinnvolle Sache, und eigentlich ganz einfach, manchmal aber auch mit einem gehörigen Explosionspotenzial. Probleme tauchen nämlich dann auf, wenn man für den Editor HTML zulässt, und Texte aus diesem CMS angeteasered werden sollen.

Screenshot von jQuery "more"/"less" HTML truncate

Es gibt mehrere Ansätze dieses Problem zu lösen, alle basieren darauf, das ein Abschneiden nach X Zeichen nicht möglich ist! Warum ist das so? Entweder ich schneide mitten im Wort ab, was nicht schön ist, oder mitten im Zusammenhang, was nicht schön ist, oder mitten in einem HTML-Tag was zu großem Chaos führen wird! Deshalb kann man nicht einfach die ersten x Zeichen abschneiden, sondern benötigt einen Algorithmus der zum Beispiel nur an Leerzeichen (oder hinter Satzzeichen) trennt. Darüber hinaus dürfen die x Zeichen natürlich nur den Text darstellen, HTML wird bei den x Zeichen nicht berücksichtigt! Was am Anfang ganz einfach aussah entwickelt sich zu einer komplexen Angelegenheit, von der man darüber hinaus ausgehen kann, dass sie sich nie so verhält wie man es gerade erwartet.

jQuery „more“/“less“ HTML truncate schneidet einen Text an passender Stelle ab. Passend ist dabei nicht in einem HTML-Tag. Sollte der Zustand eintreten, das der Text HTML öffnet, aber nicht wieder schließt, weil dies im abgeschnittenen Teil erfolgt, stellt das jQuery Plugin sicher, das alle Tags geschlossen werden. Der Text ist abgeschnitten, das Design noch heil und der Kunde zufrieden. Aber Achtung, je nach Design kann es durchaus zu einem ziemlichen Rumgeruckel wegen eines Flash of Unstyled Content kommen.

Ähnliche Beiträge

HTML-Tables mit jQuery Ich hoffe ihr benutzt Tabellen nur noch zur Datenvisualisierung, und nicht mehr für das Design! ;) Aber zumindest dort sind sie unumgänglich. Dummerwe...
HTML5 Validierung mit jQuery HTML5 besitzt eine eingebaute Validierung für Formular-Elemente, das dumme ist nur, diese funktioniert derzeit nur auf Webkit-Browsern und nicht auf F...
Gantt Komponente für jQuery Frage ich mal etwas direkter - was macht ihr, wenn euer Kunde euch fragt, wann das Projekt fertig ist? Die korrekte Antwort würde hier wohl "Raten unt...
jQuery.sheet – Excel Spreadsheets für jQuery Es gibt da durchaus ein oder zwei Sachen, in denen man sich in Javascript die Finger bricht und man froh ist, dass es zum Beispiel jQuery gibt. Sinnvo...

Schreibe einen Kommentar

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