CSS文字转换大写

Question

这是我的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有任何想法吗？

Answer 1

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();

Answer 2

您几乎可以做到：

.link { text-transform: lowercase; }

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

它将为您提供输出：

Small caps

All caps