CSS (Cascading Style Sheets) — каскадные таблицы стилей.
CSS — это язык представления внешнего вида документа, написанного с использованием языка разметки.

Псевдокласс :first-word — точно не существует решения?

Vlad » 18 сен 2018, 20:31

Собственно, вопрос в заголовке.
Хочется средствами CSS стилизовать первое слово в предложении. Никаких вариантов не могу найти в интернете. Пишут, что нет такого псевдокласса и близко!
Так ли это?
Если через CSS никак нельзя такое реализовать, то может не сложный JavaScript кто-то предложит?
Спасибо.
Vlad
 
Сообщения: 9
Зарегистрирован: 21 фев 2015, 08:56

Re: Псевдокласс :first-word — точно не существует решения?

Александр » 20 сен 2018, 14:08

Пишут, что нет такого псевдокласса и близко!

Да, так и есть.
Нужно уточнить, что это был бы не псевдо-класс, а псевдо-элемент. Вот ссылка на спецификацию псевдо-элементов https://www.w3.org/TR/css-pseudo-4/
Предполагаю, что такой псевдоэлемент (::first-word) не ввели из-за трудности реализации, связанной с кодироваками типа четырехбайтный UTF и т. п.
В общем, не получится эмулировать этот псевдоэлемент какими-то трюками на CSS.

Могу предложить реализацию на чистом JavaScript «first-word» и «last-word».

Реализация псевдокласса (псевдоэлемента) «first-word».
JavaScript pseudo-class (pseudo-element) «::first-word» emulation:
Код: Выделить всё
function first_word(id){
    var e = document.getElementById(id);
    var s = e.innerHTML;
    var w = s.split(' '); // разбиваем строку на слова по пробелам (split the string into words by spaces)
    var fw = '<span class="first-word">'+w.shift()+'</span>';
    w.unshift(fw);
    var ns = w.join(' ');
    e.innerHTML = ns;
};


Реализация псевдокласса (псевдоэлемента) «last-word».
JavaScript pseudo-class (pseudo-element) «::last-word» emulation:
Код: Выделить всё
function last_word(id){
    var e = document.getElementById(id);
    var s = e.innerHTML;
    var w = s.split(' '); // разбиваем строку на слова по пробелам (split the string into words by spaces)
    var lw = '<span class="last-word">'+w.pop()+'</span>';
    w.push(lw);
    var ns = w.join(' ');
    e.innerHTML = ns;
};

Кстати, в случае «last-word», как видите, эта простая функция захватит и знак препинания в конце предложения. Но это уже дело творческое, как с этим быть.
Александр
 
Сообщения: 264
Зарегистрирован: 20 мар 2014, 17:05


Вернуться в CSS