कैसे पहले अक्षर केवल प्रत्येक मामले

Question

मैं प्रथम अक्षर को बड़ा करना चाहते हैं में सीएसएस का उपयोग कर फायदा उठाने में केवल और अन्य सीएसएस का उपयोग कर

स्ट्रिंग छोटे होना चाहिए:

SOMETHING BETTER 
sOMETHING bETTER 
Something better 

लेकिन परिणाम

होना चाहिए

Something Better 

क्या यह सीएसएस का उपयोग कर संभव है? पहले अक्षर को कैपिटल करने के लिए मैं

text-transform: capitalize; 

लेकिन प्रत्येक मामले में पूंजीकरण करने में सक्षम नहीं हूं। "मैं सीएसएस का उपयोग करना चाहता हूं क्योंकि मेरे आवेदन में यह हर जगह हार्ड कोड लिखा गया है लेकिन एक वर्ग को हर जगह बुलाया गया है।"

Answer 1

अकेले सीएसएस के साथ यह संभव नहीं है लेकिन उदाहरण के लिए आप इसे जावास्क्रिप्ट या PHP के साथ कर सकते हैं।

में पीएचपी

ucwords() 

और में जावास्क्रिप्ट

function toTitleCase(str){ 
    return str.replace(/\w\S*/g, function(txt){ 
     return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}); 
} 

से Convert string to title case with JavaScript

Answer 2

निकाले आप :first-letter छद्म तत्व का उपयोग करने में सक्षम होना चाहिए:

.fl { 
display: inline-block; 
} 

.fl:first-letter { 
text-transform:uppercase; 
} 

<p> 
<span class="fl">something</span> <span class="fl">better</span> 
</p> 

पैदावार:

कुछ बेहतर

Answer 3

आप this answer का एक संयोजन और कुछ जावास्क्रिप्ट (jQuery का उपयोग) की कोशिश कर सकते

HTML:

<div class='capitalize'> 
    SOMETHING BETTER 
    SOMETHING BETTER 
    SOMETHING BETTER 
</div> 

JavaScript:

$('.capitalize').each(function(){ 
    var text = this.innerText; 
    var words = text.split(" "); 
    var spans = []; 
    var _this = $(this); 
    this.innerHTML = ""; 
    words.forEach(function(word, index){ 
     _this.append($('<span>', {text: word})); 
    }); 
}); 

सीएसएस:

.capitalize { 
    text-transform: lowercase; 
} 

.capitalize span { 
    display: inline-block; 
    padding-right: 1em 
} 

.capitalize span:first-letter { 
    text-transform: uppercase !important; 
} 

डेमो: सीएसएस में पहली अक्षर का छद्म तत्व: http://jsfiddle.net/maniator/ZHhqj/

Answer 4

आप क्यों नहीं बस का उपयोग न?

h2:first-letter{ 
text-transform: uppercase; 

} 

h2{ 

*your general code for h2 goes here;* 

} 

Answer 5

हाँ, सीएसएस यहाँ कोई मदद नहीं है। जावास्क्रिप्ट की दुनिया में आपका स्वागत है, जहां कुछ भी संभव है।

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



    .first-letter { 
    color: red; 
    } 



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