Comment puis-je styliser le premier mot de chaque paragraphe en utilisant CSS et JavaScript ?

Style CSS du premier mot dans les paragraphes

Améliorer l'apparence de mots spécifiques dans les éléments de texte est une exigence de conception courante. Dans ce cas, l'objectif est de faire ressortir le premier mot de chaque paragraphe sous la div #content en augmentant sa taille de police à 14 points.

Approche CSS

CSS fournit des pseudo-éléments pour sélectionner et styliser des parties spécifiques d'un élément. Malheureusement, il n’existe pas de pseudo-élément direct pour cibler le premier mot. :first-letter et :first-line existent, mais ils s'adressent respectivement à la première lettre et à la première ligne.

Solution JavaScript

Bien que CSS n'ait pas de premier mot direct sélecteur, JavaScript propose une approche alternative. Le code peut être utilisé pour identifier le premier mot de chaque paragraphe et appliquer le style souhaité.

Par exemple, le code fourni par Dynamicsitesolutions (http://www.dynamicsitesolutions.com/javascript/first-word-selector /) permet la sélection et le style du premier mot de n'importe quel élément :

function setFirstWord($el, fws, reset) {
    $el.each(function () {
        var e = $(this),
            fw = " ":fws+": ";

        if (e.data("fws") && !reset) {
            return;
        }

        if (reset) {
            e.find(":data(fws)").css({
                color: e.css("color"),
                fontSize: e.css("fontSize"),
                fontWeight: e.css("fontWeight"),
                fontStyle: e.css("fontStyle"),
            }).removeData("fws");
            return;
        }

        var text = e.html().replace(/\s+/g, " ").split(" ");
        e.html(fw + text.slice(1).join(" ") + text[0]);
        e.find(fws+":first").css({
            color: $text_color,
            fontSize: $first_word_size,
            fontWeight: $first_word_weight,
            fontStyle: $first_word_style,
        }).data("fws", true);
    });
}

En utilisant ce script, vous pouvez styliser avec succès le premier mot des paragraphes dans le #content div.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!