CSS와 JavaScript를 사용하여 각 단락의 첫 단어 스타일을 어떻게 지정할 수 있나요?

단락 첫 단어의 CSS 스타일

텍스트 요소 내에서 특정 단어의 모양을 향상시키는 것은 일반적인 디자인 요구 사항입니다. 이 경우 #content div 아래 각 문단의 첫 번째 단어를 14포인트로 늘려서 눈에 띄게 만드는 것이 목표입니다.

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

이 스크립트를 사용하면 #content 내 단락의 첫 번째 단어 스타일을 성공적으로 지정할 수 있습니다. div.

위 내용은 CSS와 JavaScript를 사용하여 각 단락의 첫 단어 스타일을 어떻게 지정할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!