Làm thế nào để Viết hoa chữ cái đầu tiên chỉ sử dụng CSS trong từng trường hợp

Question

Tôi muốn Viết hoa chữ cái đầu tiên chỉ và khác nên nhỏ sử dụng CSS

String là:

SOMETHING BETTER 
sOMETHING bETTER 
Something better 

nhưng kết quả nên

Something Better 

Điều này có thể sử dụng CSS không? Để viết hoa chữ cái đầu tiên Tôi đang sử dụng

text-transform: capitalize; 

Nhưng không thể viết hoa trong mỗi trường hợp. "Tôi muốn sử dụng CSS vì trong ứng dụng của tôi nó đã viết mọi nơi được mã hóa cứng nhưng một lớp đã được gọi ở khắp mọi nơi."

Answer 1

Không thể thực hiện với CSS một mình nhưng bạn có thể làm điều đó với Javascript hoặc PHP chẳng hạn.

Trong PHP

ucwords() 

Và trong Javascript

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

Trích từ Convert string to title case with JavaScript

Answer 2

bạn sẽ có thể sử dụng :first-letter giả yếu tố:

.fl { 
display: inline-block; 
} 

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

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

sản lượng:

gì đó tốt hơn

Answer 3

Bạn có thể thử một sự kết hợp của this answer và một số javascript (sử dụng 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})); 
    }); 
}); 

CSS:

.capitalize { 
    text-transform: lowercase; 
} 

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

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

Demo: http://jsfiddle.net/maniator/ZHhqj/

Answer 4

Tại sao không bạn chỉ cần sử dụng: yếu tố giả đầu tiên chữ trong css?

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

} 

h2{ 

*your general code for h2 goes here;* 

} 

Answer 5

Có, CSS không trợ giúp ở đây. Chào mừng bạn đến với thế giới JavaScript, nơi mọi thứ đều có thể.

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>