kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Cutter.js: Textverkürzungen und „Weiterlesen“-Links per JavaScript

Moderne Websites werden häufig mit Teaser-Bereichen bestückt die einen bestimmten Inhalt mit einigen Zeilen einleiten, und anschließend einen "Weiterlesen"-Link anzeigen über den der Besucher den ungekürzten Inhalt angezeigt bekommt. Bei Blogs sind die Kategorie- und Übersichtsseiten größtenteils nach diesem Prinzip aufgebaut. Aber auch "normale" Websites setzen zunehmend auf dieses Prinzip und realisieren beispielsweise die Startseite oder lange Seiteninhalte über Teaser.
Wer WordPress als Rückgrat einer Website einsetzt, wird eine solche Funktion wohl meistens über die functions.php steuern; für kleine Websites, Portfolios oder andere statische Seiten muss jedoch eine andere Lösung her.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

Cutter.js

Cutter.js nimmt euch die Arbeit ab und kürzt Texte unter Berücksichtigung der enthaltenen HTML-Tags.

via tagdocs.de

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

3 Kommentare

  1. Moev

    Verfasst am 16. August 2011 um 16:38 Uhr.

    Sehr cool.
    Kann ich Grade gut gebrauchen :)

  2. Anastasiya

    Verfasst am 14. Oktober 2011 um 13:19 Uhr.

    Wie kann ich denn den Code umkehren? Also dass zuerst nur ein Teil vom Text angezeigt wird und dann beim Klick der ganze Text? Bei mir wird zuerst der ganze Text angezeigt.
    Und warum geht bei jedem Klick die ganze Seite wieder ganz nach oben?

    Vielen Dank

  3. Torsten Zeband

    Verfasst am 29. Mai 2012 um 11:05 Uhr.

    Je nach Website-Konfiguration (base href) kann es zu falschen Verlinkungen kommen. Ich hab in der cutter.js den Link auf „#“ entfernt,

    d.prototype.createViewMore = function () {
    var f = b.createElement(„a“);
    f.className = this.oClasses.more;
    f.title = this.oTexts.more;
    f.innerHTML = this.oTexts.more;
    this.oViewMore = f
    };

    Dadurch wird nicht mehr falsch verlinkt und es geht trotzdem alles.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.