CSS文本转换大写的所有大写

前端之家收集整理的这篇文章主要介绍了CSS文本转换大写的所有大写前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这里是我的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();​

猜你在找的CSS相关文章