Как изменить стиль первого слова в тексте (:first-word)

:first-word — такого псевдокласса не существует.
Но решение есть — первое слово в тексте можно выделить с помощью PHP или JavaScript.

PHP
На PHP задача решается с помощью строковых функций.

Допустим у нас есть некая переменная $title, содержащая текст.

1
$title = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.';

Для решения задачи воспользуемся функцией explode(), которая возвращает массив строк, полученных разбиением строки с помощью разделителя. В нашем случае разделителем будет являться первый пробел.

1
2
$title = explode(" ", $title, 2);
echo '<span>' . $title[0] . '</span> ' . $title[1];

В результате получим:

1
<span>Lorem</span> ipsum dolor sit amet, consectetur adipisicing elit.

Теперь тегу span можно задать нужный стиль.

JavaScript
С JavaScript вряд ли кто-то захочет связываться, а вот на jQuery задача решается ещё проще, чем на PHP.

Код такой:

1
2
3
4
5
6
$(document).ready(function(){
$('h1').each(function(){
var title = $(this);
title.html( title.text().replace(/(^\w+)/,'<span>$1</span>') );
});
});

Скрипт находит все заголовки H1 на странице и оборачивает первое слово внутри их тегом span.
В результате первое слово всех заголовков H1 будет красного цвета, как и в примере с PHP.

Так же можно выделить последнее слово, первое предложение, последнее предложение.

Не забудьте подключить jQuery.

sample

Share this post:

Recent Posts