úterý 30. dubna 2013

Jak na CSS pseudo selektor ":first-word", který neexistuje?

V CSS stále postrádám slektor :first-word. :first-letter a :first-line k dispozici je, ale :first-world se musí obejít. Dobré tipy jsem našel na Stack Overflow v článku CSS to increase size of first word. Konstrukce pro jQuery

$('#links a').each(function(){
    var me = $(this);
    me.html( me.text().replace(/(^\w+)/,'<strong>$1</strong>') );
});

případně

$('#links a').each(function(){
    var me = $(this),
        t = me.text().split(' ');
    me.html( '<strong>'+t.shift()+'</strong> '+t.join(' ') );
});

se mi docela líbí. Nicméně jsem kód ještě potřeboval upravit tak, aby uměl zvýraznit "první slovo" v nadpisech, které mohou, ale nemusejí, obsahovat odkaz nebo i jiné tagy (proto hledání * = jakéhokoliv zanořeného tagu), s mezerami to není tak jednoznačné (proto regulární výraz jako argument funkce split) a když by těch prvních slov bylo víc... (proto ta varianta s polem):

$('h2, h3').each(function(){
    var c = $(this),
        a = c.find('*').first(),
        s;
    if ( a.length ){
        c = a;
    }
    s = c.html().split(/\s+/);
    c.html( '<strong>' + s.splice(0, Math.round(s.length/2)).join(' ') + '</strong>' + (s.length ? ' ' + s.join(' ') : '') );
});

Použití floor místo Round dá trochu jiné výsledky. I když kód není zdaleka neprůstřelný, v mém případě funguje dostatečně správně.

MAKE Magazine

Technology Review RSS Feeds

Nejčtenější příspěvky