我可以只使用CSS來更改每個單詞的首字母的顏色和字體大小

像問題標題一樣，是否可以更改每個單詞的首字母的顏色和字體大小。例如，像下面的圖片：我可以只使用CSS來更改每個單詞的首字母的顏色和字體大小

enter image description here

是否有可能與只 CSS來做到這一點？我可以使用jQuery，但只能在純CSS或CSS3解決方案中無法使用。

2012-09-21 Champ

http://stackoverflow.com/questions/8730037/capitalise-the-first-letter-of-each-word-within-a-certain-class將有助於jQuery解決方案。這是不可能的，因爲沒有'：每個單詞的第一個字母'選擇器 – andyb

可以產生小帽子的每一個字大寫的文本使用此CSS：

h1 { 
    font-variant: small-caps; 
    text-transform: capitalize; 
}

但你不能改變單獨使用CSS首字母的顏色;你將不得不使用jQuery將span元素添加到文本中，然後設置這些元素的樣式。事情是這樣的：

$('h1').html(function() { 
    // Very crude regex I threw together in 2 minutes 
    return $(this).text().replace(/\b([a-z])/gi, '<span class="caps">$1</span>') 
});

有了這個CSS：

h1 { 
    font-variant: small-caps; 
    text-transform: capitalize; 
} 

h1 .caps { 
    color: red; 
}

來源

2012-09-21 13:39:17 BoltClock

使用psedo元素:first-letter，如：

.word:first-letter 
{ 
    font-size:200%; 
    color:#8A2BE2; 
}

由於意見建議，這需要每個單詞在它自己的元素，例如。 <span>

但是，這更接近你在純CSS中想要的東西。

來源

2012-09-21 13:39:41 Nelson

除非每個單詞都是class =「wrap」的塊或嵌入塊，否則這是行不通的 – BoltClock

這個工作，但僅限於第一個單詞的第一個字母。 – tomthorgal

JSFiddle

在這裏你去 -

<p class="each-word">First letter of every word is now red!</p> 

.first-letter { 
    color: red; 
    } 

window.onload = function(){ 
    var elements = document.getElementsByClassName("each-word") 
    for (var i=0; i<elements.length; i++){ 
    elements[i].innerHTML = elements[i].innerHTML.replace(/\b([a-z])([a-z]+)?\b/gim, "<span class='first-letter'>$1</span>$2") 
    } 
}

來源

2012-09-21 13:44:17 Dipak

爲你的腳本+1，但正如我所說的純CSS解決方案是首選 – Champ

HTML

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

JQuery的

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

JSFIDDLE

來源

2012-09-21 13:45:54

我可以只使用CSS來更改每個單詞的首字母的顏色和字體大小

回答

相關問題