CSS text-transform充分利用所有上限

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

你几乎可以这样做:

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

它会给你输出:

Small caps
All caps

Answer 2

使用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 3

使用JavaScript转换使用.toLowerCase(),并capitalize会做休息.

Answer 4

有趣的问题!

capitalize将单词的每个首字母转换为大写,但不会将其他字母转换为小写.甚至:first-letter伪类都不会削减它(因为它适用于每个元素的第一个字母,而不是每个单词),我看不到将小写和大写结合起来以获得所需结果的方法.

所以据我所知,这对CSS来说确实是不可能的.

@Harmen在他的回答中展示了漂亮的PHP和jQuery解决方法.

Answer 5

我想推荐一个纯 CSS解决方案，它比提供的第一个字母解决方案更有用，但也非常相似。

.link {
  text-transform: lowercase;
display: inline-block;
}

.link::first-line {
  text-transform: capitalize;
}

<div class="link">HELLO WORLD!</div>
<p class="link">HELLO WORLD!</p>
<a href="#" class="link">HELLO WORLD!  ( now working! )</a>

尽管这仅限于第一行，但对于比首字母解决方案更多的用例，它可能更有用，因为它将大写应用于整行，而不仅仅是第一个单词。（第一行中的所有单词）在 OP 的特定情况下，这可以解决它。

注意：正如第一个字母解决方案评论中提到的，CSS 规则的顺序很重要！另外请注意，我改变了<a>一个标记<div>标签，因为某些原因，伪元素::first-line不起作用与<a>标签本身，但无论是<div>或<p>有细。 编辑：如果将<a>元素添加到类中，则该元素将起作用。感谢Dave Land发现这一点！display: inline-block;.link

新注意：如果文本换行，它将丢失大写，因为它现在实际上位于第二行（第一行仍然可以）。

Answer 6

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

Answer 7

JavaScript：

var links = document.getElementsByClassName("link");
for (var i = 0; i < links.length; i++) {
  links[i].innerHTML = links[i].innerHTML.toLowerCase();
}

CSS：

.link { text-transform: capitalize; }

Khan的“结束工作”（这是更干净的工作，对我有用）在标记为答案的帖子评论中被删除。