CSS-Selektor first-word mittels jQuery umsetzen

Mit CSS-Selektoren wie first-child, first-line oder first-letter ist es schnell und einfach möglich, den Beginn von Texten etc. individuell zu formatieren, ohne entsprechende Elemente verwenden zu müssen. Leider fehlt hierbei das Pseudoelement first-word, um das erste Wort eines Textes anzusprechen. Natürlich kann man dies manuell lösen, indem man z.B. den span-Tag benutzt:

  1. <span class="first-word">Erstes</span> Wort

Solange, wie man die Texte manuell pflegt, geht das auch einwandfrei. Aber ich sitze aktuell an der Entwicklung eines Templates, dessen Inhalte über ein CMS erfasst werden und die Nutzer des CMS nicht unbedingt alle HTML- / CSS-versiert sind. Also musste ich eine andere Lösung finden und die geht mittels jQuery.

Als Beispiel nehme ich eine Überschrift, die ich mit der css-Klasse first-word kennzeichne:

  1. <h2 class="first-word">Hier steht der Text</h4>

In der CSS-Datei definiere ich die Eigenschaften des H2-Tags, z.B. die Schriftfarbe, und ergänze zusätzlich eine andere Farbe für einen span-Tag nach dem H2-Tag:

  1. h2 { color:#828A92; }
  2. h2 span { color:#4791ce; }

Und folgender Javascript-Code muss genutzt werden:

  1. jQuery(".first-word").each(function(){
  2. var me = $(this), fw = me.text().split(' ');
  3. me.html( '<span>'+fw.shift()+'</span> '+fw.join(' ') );
  4. });

Durch das jQuery-Script wird das erste Wort im Text zusätzlich mit dem span-Tag umschlossen und somit kann diesem Wort eine andere Farbe, eine andere Schriftart etc. zugewiesen werden. Und man ist unabhängig davon, dass der Erfasser im CMS selber an den Tag denken muss.

Vielleicht kann der ein oder andere diese Idee selber mal als Anregung gebrauchen, über alternative, ggf. bessere, Vorschläge zur Vorgehensweise würde ich mich sehr freuen.

4 Gedanken zu „CSS-Selektor first-word mittels jQuery umsetzen“

  1. Das Skript ist echt super! DNAKE für den Post.

    Habe es gerade für ein Menü innerhalb eines CMS eingesetzt – auch hier wäre manuell nichts zu machen gewesen.
    Wie wäre denn die Abwandlung für „last-word“ ?

  2. Freut mich, dass es hilft, Sandra. Für eine „last-word“-Umsetzung habe ich aber leider selber aktuell keine Idee, das dürfte etwas schwieriger sein. Wenn mir noch eine Idee einfällt, melde ich mich bei Dir.

    CU Frank-Andre

  3. Danke Frank-Amdre! Ich brauche genau das! (2023) 🙂
    Leider lässt es mich WP nicht speichern.

    Deine PHP-Code-Änderungen wurden aufgrund eines Fehlers in Zeile 34 der Datei wp-content/themes/roseta-plus-child/functions.php zurückgesetzt. Bitte beheben und versuchen, erneut zu speichern.

    syntax error, unexpected token „var“

    Weißt Du, wie es doch gehen könnte? Danke!

  4. Hallo Brisch,

    wo hast Du denn den Javascript-Teil eingetragen? Und kannst Du mir einen Link senden, damit ich es mir mal live anschauen könnte?

    Beste Grüße!

Schreibe einen Kommentar

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

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.