这是我的HTML:
<a href="#" class="link">small caps</a> & <a href="#" class="link">ALL CAPS</a>
这是我的CSS:
.link {text-transform: capitalize;}
输出为:
Small Caps & ALL CAPS
我希望输出为:
Small Caps & All Caps
有任何想法吗?
CSS无法做到这一点,您可以为此使用PHP或Javascript。
PHP示例:
$text = "ALL CAPS"; $text = ucwords(strtolower($text)); // All Caps
jQuery示例(现在是插件!):
// Uppercase every first letter of a word jQuery.fn.ucwords = function() { return this.each(function(){ var val = $(this).text(), newVal = ''; val = val.split(' '); for(var c=0; c < val.length; c++) { newVal += val[c].substring(0,1).toUpperCase() + val[c].substring(1,val[c].length) + (c+1==val.length ? '' : ' '); } $(this).text(newVal); }); } $('a.link').ucwords();