WordPress-Excerpts werden in einer bestimmten Länge ausgegeben, der Default-Wert sind 55 Wörter.  Möchte man diesen Wert ändern, kann man das über den Filter excerpt_length relativ einfach erreichen.

function custom_excerpt_length( $length ) {
return 20;
}
add_filter( ‘excerpt_length’, ‘custom_excerpt_length’ );

Sie auch https://codex.wordpress.org/Plugin_API/Filter_Reference/excerpt_length

Geht das nicht auch per CSS?

So lange ein Projekt noch in der Entwicklung ist, ändert sich die Form von Auszügen/Excerpts häufig. Auch braucht man oft unterschiedliche Varianten von Auszügen: An einer Stelle ist ein längerer Teaser sinnvoll, an anderer Stelle ist der Platz knapp und ein Satz muss reichen.

Da wäre es eigentlich praktisch, wenn man die Darstellung der Exzerpte per CSS steuern könnte. Zumindest bis zu dem Zeitpunkt, an dem feststeht, welche Exzerpt-Varianten in welchem Kontext gebraucht werden.

1. CSS Eigenschaft ‚text-overflow:ellipsis‘

In CSS3 gibt es die Eigenschaft text-overflow. Damit kann man festlegen, was passieren soll, wenn ein Text länger ist als die Box, die ihn umschließt. Der default Wert ist text-overflow:clip, damit wird der Text einfach abgeschnitten. Trägt man statt dessen text-overflow:ellipsis ein, erscheinen am Ende der abgeschnittenen Zeile drei Pünktchen (Ellipsis).

Tolle Sache, dachte ich. Damit müsste man eigentlich auch die Darstellung von Exzerpten auf einer WordPress-Seite per CSS steuern können. Das ist leider nicht ganz einfach.

Das Dumme ist, text-overflow kann nur eine einzelne Zeile formatieren. Sollen mehrere Zeilen zu sehen sein, hat die Anweisung keinen Effekt bzw. es erscheint nur eine Zeile.

text-overflow:clip

Eine einzelne etwas zu lange Zeile Text

text-overflow:ellipsis

Eine Text über mehrere Zeilen, der aber nicht mehr sichtbar ist

2. Line Clamping

Es gibt noch andere Methoden, mit mehrzeiligen Texten umzugehen. Das Stichwort hier ist „Line Clamping“ – eine Methode, die es zwar auch als CSS-Property gibt, allerdings nur für Webkit-Browser. Will man alle Browser ansprechen, wird es umständlich.
Bei CSS Tricks gibt es eine Zusammenstellung über verschiedene Line-Clamping-Methoden.

3. Ein Sass-Mixin für alle Browser

Bei Blaze Basamian von Revelry habe ich eine CSS-Lösung gefunden, die auf den Webkit-Properties aufbaut und das Ganze um Fallbacks erweitert: Multi-line Ellipsis using pure CSS as a work around. Die Methode beginnt bei den Webkit-Styles (webkit-line-clam und text-overflow) und erweitert das CSS Schritt für Schritt um Fallbacks für andere Browser.

Fazit

Der Umgang mit Text-Auszügen per CSS ist technisch nicht ganz einfach. Mit der Anweisung text-overflow:ellipsis kann man nur einzeilige Texte formatieren.
Die Workarounds, die bei CSS-Tricks beschrieben werden und das Sass-Mixin von Blaze Basamian sind jedoch eine Überlegung wert.

Je nachdem, in welchem Kontext man ein Exzerpt bzw. seine Länge betrachtet, kann das Exzerpt ein rein funktionales Element sein. Man kann es aber auch als Teil des User Interface definieren.
Im einen Fall würde man den klassischen Weg gehen und mit Filtern in der functions.php arbeiten. Im anderen Fall, wenn z. B. die Nutzerführung viel mit Teaser-Elementen arbeitet, könnte eine Integration in die CSS-Datei ein interessanter Weg sein.