$('.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}));
});
});
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>
5条答案
按热度按时间vdgimpew1#
你应该可以使用
:first-letter
伪元素:产量:
更好的东西
pu82cl6c2#
单独使用CSS是不可能的,但你可以使用Javascript或PHP来实现。
在PHP中
在Javascript中
摘自Convert string to title case with JavaScript
svgewumm3#
您可以尝试this answer和一些javascript的组合(使用jQuery)
HTML:
JAVASCRIPT:
CSS:
演示:http://jsfiddle.net/maniator/ZHhqj/
ffvjumwh4#
为什么不直接使用css中的:first-letter伪元素?
quhf5bfb5#
是的,CSS在这里没有帮助。欢迎来到JavaScript的世界,在这里一切皆有可能。