Wie kann ich das erste Wort jedes Absatzes mit CSS und JavaScript formatieren?

CSS-Stil des ersten Wortes in Absätzen

Die Verbesserung der Darstellung bestimmter Wörter in Textelementen ist eine häufige Designanforderung. In diesem Fall besteht das Ziel darin, das erste Wort jedes Absatzes unter dem Div #content hervorzuheben, indem die Schriftgröße auf 14 Punkte erhöht wird.

CSS-Ansatz

CSS bietet Pseudoelemente zum Auswählen und Gestalten bestimmter Teile eines Elements. Leider gibt es kein direktes Pseudoelement, das auf das erste Wort abzielt. Sowohl :first-letter als auch :first-line existieren, aber sie beziehen sich jeweils auf den ersten Buchstaben und die erste Zeile.

JavaScript-Lösung

Obwohl CSS kein direktes erstes Wort hat JavaScript bietet einen alternativen Ansatz. Code kann verwendet werden, um das erste Wort jedes Absatzes zu identifizieren und den gewünschten Stil anzuwenden.

Zum Beispiel der bereitgestellte Code von Dynamicsitesolutions (http://www.dynamicsitesolutions.com/javascript/first-word-selector /) ermöglicht die Auswahl und Gestaltung des ersten Wortes in jedem Element:

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);
    });
}

Mit diesem Skript können Sie das erste Wort von Absätzen innerhalb des #Inhalts erfolgreich gestalten div.

Das obige ist der detaillierte Inhalt vonWie kann ich das erste Wort jedes Absatzes mit CSS und JavaScript formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!