첫 단어를 선택 / 스타일링하는 CSS

첫 단어를 선택 / 스타일링하는 CSS

---

이것은 나를 좀 어리둥절하게 만듭니다. 단락의 모든 단락 (12pt) 대신 내 #content div에있는 첫 단어를 14pt로 만들고 싶습니다. CSS에서 수행하는 방법이 있습니까? 아니면 달성하기 위해 범위의 첫 번째 단어를 사용하고 있습니까?

---

당신이 찾고있는 것이 존재하지 않는 의사 요소입니다. : first-letter와 : first-line : first-word는 없습니다.

물론 JavaScript로도 가능합니다. 이 작업을 수행하는 코드는 다음과 달라집니다. http://www.dynamicsitesolutions.com/javascript/first-word-selector/

---

Dale의 의견에 동의하지 않습니다. 강력한 요소는 유효한 사용 잘못된 요소입니다. 포함 요소에 스타일을 제공하려는 동안 콘텐츠의 의미, 사용 또는 강조에 대해 암시합니다.

이상적으로는 의사와 스타일 시트를 사용하여 클래스 작업을 수행 할 수 <span class="first-word">있습니다.

---

jQuery도 마찬가지입니다.

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

또는

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

( jQuery 메일 링리스트 의 'Wizzud'를 통해 )

---

슬프게도 CSS 3과 같은 경우에도 :first-word :last-word순수 CSS를 사용 하는 것과 같은 것들은 아직 없습니다 . 고맙게도 요즘에는 거의 모든 것에 대해 JavaScript가 있습니다. nthEverything 및 jQuery 를 사용 하면 기존의 의사 요소에서 확장 할 수 있습니다.

현재 유효한 의사는 다음과 가변적입니다.

• :first-child
• :first-of-type
• :only-child
• :last-child
• :last-of-type
• :only-of-type
• :nth-child
• :nth-of-type
• :nth-last-child
• :nth-last-of-type

그리고 nth 모든 것을 사용하여 확장 할 수 있습니다.

• ::first-letter
• ::first-line
• ::first-word
• ::last-letter
• ::last-line
• ::last-word
• ::nth-letter
• ::nth-line
• ::nth-word
• ::nth-last-letter
• ::nth-last-line
• ::nth-last-word

---

순수한 CSS 솔루션 :

: 첫 번째 줄 의사 클래스를 사용하십시오.

display:block;
Width:40-100px; /* just enough for one word, depends on font size */
Overflow:visible; /* so longer words don't get clipped.*/
float:left; /* so it will flow with the paragraph. */
position:relative; /* for typeset adjustments. */

테스트하지 않았습니다. 그것은 당신에게 잘 작동 할 것이라고 확신합니다. 이전에 의사 클래스에 블록 규칙을 적용했습니다. 모든 첫 단어에 대해 고정 된 너비로 고정되어있을 수 있으므로 text-align : center; 부정적인 공간을 처리 할 수있는 멋진 배경이나 무언가를 제공합니다.

그것이 당신을 위해 일하기를 바랍니다. :)

-Motekye

---

이 작업을 수행하려면 단어를 범위로 감싸 야합니다.

---

강력한 요소를 사용하는 것이 목적입니다.

<div id="content">
    <p><strong>First Word</strong> rest of paragraph.</p>
</div>

그런 다음 스타일 시트에서 스타일을 만듭니다.

#content p strong
{
    font-size: 14pt;
}

---

다음은 각 단락의 첫 번째 단어를 <span>태그 로 감싸기 위해 함께 던진 약간의 JavaScript와 jQuery 입니다.

$(function() {
    $('#content p').each(function() {
        var text = this.innerHTML;
        var firstSpaceIndex = text.indexOf(" ");
        if (firstSpaceIndex > 0) {
            var substrBefore = text.substring(0,firstSpaceIndex);
            var substrAfter = text.substring(firstSpaceIndex, text.length)
            var newText = '<span class="firstWord">' + substrBefore + '</span>' + substrAfter;
            this.innerHTML = newText;
        } else {
            this.innerHTML = '<span class="firstWord">' + text + '</span>';
        }
    });
});

그런 다음 CSS를 사용하여 .firstWord.

모든 유형의 공백을 설명하지 않기 때문에 완벽하지는 않습니다. 그러나 나는 그것이 당신이 추구하는 것을 몇 가지 조정으로 성취 할 수 있다고 확신합니다.

이 코드는 페이지로드 후에 만 ​​실행되므로 효과를 확인하는 데 몇 초가 걸릴 수 있습니다.

---

이것에 대한 일반 CSS 방법이 없습니다. 범위에서 팝하려면 JavaScript + Regex를 사용해야 할 수도 있습니다.

이상적으로는 첫 단어에 대한 의사 요소가 있지만 작동하지 않는 것처럼 보이기 때문에 운이 좋지 않습니다. 우리는 : first-letter와 : first-line이 있습니다.

스팬을 사용하지 않고 도달하기 위해 : after 또는 : before의 조합을 사용할 수 있습니다.

---

단락 텍스트에 스팬 태그를 삽입합니다. 예-의 <p><span>Hello</span>My Name Is Dot</p경우 첫 글자의 스타일을 지정합니다.

참고 URL : https://stackoverflow.com/questions/55612/css-to-select-style-first-word