CSS と JavaScript を使用して各段落の最初の単語のスタイルを設定するにはどうすればよいですか?

段落の最初の単語の CSS スタイル

テキスト要素内の特定の単語の外観を向上させることは、一般的なデザイン要件です。この場合の目標は、フォント サイズを 14 ポイントに増やして、#content div の下の各段落の最初の単語を目立たせることです。

CSS アプローチ

CSS は、要素の特定の部分を選択してスタイル設定するための疑似要素を提供します。残念ながら、最初の単語をターゲットとする直接の擬似要素はありません。 :first-letter と :first-line は両方とも存在しますが、それぞれ最初の文字と行を指定します。

JavaScript ソリューション

CSS には直接の最初の単語がありませんが、セレクターでは、JavaScript が代替アプローチを提供します。コードを使用して、各段落の最初の単語を識別し、必要なスタイルを適用できます。

たとえば、Dynamicsitesolutions から提供されたコード (http://www.dynamicsitesolutions.com/javascript/first-word-selector) /) 任意の要素の最初の単語の選択とスタイルを有効にします:

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

このスクリプトを使用すると、段落内の最初の単語を適切にスタイル設定できます。 #コンテンツ部門

以上がCSS と JavaScript を使用して各段落の最初の単語のスタイルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。