Ostatnio przyszło mi wdrażać projekt graficzny, na którym tytuł strony/wpisu wyglądał w ten sposób, że zawsze pierwszy wyraz był innego koloru niż pozostałe. Niby nic trudnego, ale w momencie gdy treść jest generowana dynamicznie i nie jest to statyczny HTML to pojawia się mały problem. Kojarzyłem pewne funkcje w CSS pozwalające na wyróżnienie pierwszego znaku, ba nawet pierwszej linijki. Mowa tu oczywiście o selektorach :first-letter i :first-line. Na zdrowy chłopski rozum zacząłem szukać podobnego pseudoelementu dla pierwszego wyrazu, czyli coś co brzmiałoby :first-word. Niestety, okazało się, że obecnie nie bardzo mogę coś takiego w łatwy sposób zaimplementować z poziomu CSS. Próbowałem jeszcze przez chwilę znaleźć gotowe rozwiązanie, niestety bezskutecznie. Cały projekt oparty był na WordPressie, więc postanowiłem dopisać po prostu odpowiednią funkcję w pliku functions.php. Nie twierdzę, że jest to optymalne rozwiązanie, ale z pewnością wystarczająco skuteczne. Oto kod:

function first_word($tekst){
  $space = ' ';
  $pos = strpos($tekst, $space);
  if ($pos){
  $firstword = substr($tekst, 0, $pos);
  $rest = substr($tekst, $pos);
  echo '<span class="first-word">'.$firstword.'</span> '.$rest;
  }
  else echo $tekst;
}

Funkcja działa w ten sposób, że pobiera np. tytuł wpisu w zmiennej $tekst, a następnie określa pozycję pierwszej spacji. Potem to już tylko rozbicie łańcucha na pierwsze słowo i resztę i odpowienie „ubranie” w style pierwszego wyrazu.