首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >CSS文本-全部大写转换

CSS文本-全部大写转换
EN

Stack Overflow用户
提问于 2010-08-13 03:14:31
回答 9查看 133.2K关注 0票数 143

这是我的HTML:

代码语言:javascript
复制
<a href="#" class="link">small caps</a> & 
<a href="#" class="link">ALL CAPS</a>

这是我的CSS:

代码语言:javascript
复制
.link {text-transform: capitalize;}

输出为:

代码语言:javascript
复制
Small Caps & ALL CAPS

我希望输出是:

代码语言:javascript
复制
Small Caps & All Caps

有什么想法吗?

EN

回答 9

Stack Overflow用户

回答已采纳

发布于 2010-08-13 03:26:02

CSS无法做到这一点,你可以使用PHP或Javascript来实现这一点。

PHP示例:

代码语言:javascript
复制
$text = "ALL CAPS";
$text = ucwords(strtolower($text)); // All Caps

jQuery示例(现在它是一个插件!):

代码语言:javascript
复制
// 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();​
票数 61
EN

Stack Overflow用户

发布于 2013-04-30 07:09:16

使用.toLowerCase()capitalize进行JavaScript转换可以完成剩下的工作。

票数 37
EN

Stack Overflow用户

发布于 2010-08-13 03:23:16

captialize只影响单词的第一个字母。http://www.w3.org/TR/CSS21/text.html#propdef-text-transform

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3471157

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档