각 단어의 첫 글자 값 변경

Question

jQuery, CSS 또는 PHP를 사용하여 문자열의 각 단어의 첫 글자 크기를 늘리려고합니다.

<h1>The title of this page goes here</h1> 

내가 (CSS와 아무 문제) 대문자로 모든 텍스트를 변환 텍스트 꿔하지만 다음의 글꼴 크기를 증가 : 예를 들어, 정말 같은 H1 태그에 제목을 가지고거야 문자열에 나타나는 첫 글자. CSS 또는 jQuery를 사용하면 각 단어의 첫 글자를 선택하고 수정하는 방법이 있습니까?

Answer 1

$(document).ready(function() { 
    var words = $('h1').text().split(' '); 
    var html = ''; 
    $.each(words, function() { 
     html += '<span style="font-size:200%">'+this.substring(0,1)+'</span>'+this.substring(1) + ' '; 
    }); 
    $('h1').html(html); 
}); 

여기에 행동에 그것의 예입니다 : http://jsfiddle.net/hCvsu/1/

Answer 2

가장 쉬운 방법은 아마 바로 CSS, 그것은 당신이 쓰기에 대한 약간의 여분의 마크 업을 생성하지만. JQuery는 추가 오버 헤드로 동일한 양의 추가 마크 업을 만들 것이고 JS 지원 없이는 실패 할 것입니다. h1.dropcaps div { float : left; } h1.dropcaps div : 첫 글자 { 글꼴 크기 : 300 %; font-weight : bold; }

는

<h1 class="dropcaps"><div>Your</div> <div>text</div> <div>here</div> 

UPDATE : 이 밝혀 : 첫 번째 문자는 일부 브라우저에서 인라인 요소 내에 작동하지 않습니다.

이 문제를 해결하려면 div에 넣고 div를 플로팅하십시오. 마크 업을 개정했습니다. http://jsfiddle.net/MBZaw/

Answer 3

나는 일을 :first-letter을 얻을 수 있지만, 여기에 가능한 해결책은 추가 태그 또는 단체 포함되지 않은 <h1> 가정의 :

$('h1').html(function(i,html){ 
    return html.replace(/(\S)(\S*)/g, '<span class="FirstLetter">$1</span>$2'); 
}); 

CSS :

.FirstLetter {color:green} 

가능한을 이점은 모든 브라우저에서 작동해야한다는 것입니다.
정규식은 매우 간단합니다. \S은 공백이 아닌 문자를 나타냅니다. 단어별로 단어를 매치하고 첫 번째 그룹 ($1)의 각 단어의 첫 번째 문자와 두 번째 그룹의 나머지 문자 ($2)를 쉽게 바꿀 수 있도록 캡처합니다.

근무 예 : 당신이 당신의 페이지에 하나의 H1이있는 경우 http://jsbin.com/ufovi4

Answer 4

Ajma 솔루션은 작동합니다.

이 모든 H1 작동 :

$('h1').each(function() { 
    var jqt = $(this); 
    var txt = jqt.text(); 
    jqt.html('<span style="font-size:200%">'+txt.substring(0,1)+'</span>'+ txt.substring(1)); 
    }); 

가능한 개선 : 대신 스타일 스팬의, 클래스와 범위를 만들고 글꼴 크기 않습니다 : CSS에서 200 %.

가능한 문제 : h1에 다른 태그가 포함되어 있으면 해당 태그가 손실되며 텍스트 만 유지됩니다.이것은 작동이 도움이

희망, 시몬

Answer 5

Here is the JSfiddle

var h1 = $('h1'), 
    words = h1.html().split(' '), 
    withCaps = ''; 
for (var i = 0; i < words.length; i++) 
    withCaps += '<span>' + words[i].substring(0, 1).toUpperCase() + '</span>' + words[i].substring(1) + ' '; 

h1.html(withCaps); 

Answer 6

. CSS에 h1 span {font-size: 125%} 또는 그 이상을 설정하십시오.

$('h1').each(function(){ 
    var $this = $(this); 
    var words = $this.text().split(' '); 
    var newHtml = ''; 
    for (var i = 0; i < words.length; i++) { 
     newHtml += '<span>' + words[i].substring(0, 1) + '</span>' + words[i].substring(1) + ' '; 
    } 
    $this.html(newHtml); 
});