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

时间:2010-08-12 19:14:31

标签: 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

有什么想法吗?

15 个答案:

答案 0 :(得分:169)

您可以几乎使用:

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

它会给你输出:

Small caps
All caps

答案 1 :(得分:54)

使用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();​

答案 2 :(得分:27)

使用.toLowerCase()转换为JavaScript,capitalize将完成剩下的工作。

答案 3 :(得分:25)

有趣的问题!

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

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

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

答案 4 :(得分:5)

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“最终做了什么”(这对我来说更干净,更有帮助)在帖子的评论中被标记为答案。

答案 5 :(得分:3)

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

答案 6 :(得分:3)

可能对java和jstl有用。

  1. 使用本地化消息初始化变量。
  2. 之后可以在jstl toLowerCase函数中使用它。
  3. 使用CSS进行转换。
  4. 在JSP中

    1

    <fmt:message key="some.key" var="item"/>
    

    2

    <div class="content">
      <a href="#">${fn:toLowerCase(item)}</a>
    </div>
    

    在CSS中

    3

    .content {
      text-transform:capitalize;
    }
    

答案 7 :(得分:3)

你可以用css第一个字母来做! 例如我想要菜单:

a {display:inline-block; text-transorm:uppercase;}
a::first-letter {font-size:50px;}

它只与块元素一起运行 - 因此是内联块!

答案 8 :(得分:2)

如果数据来自数据库(如我的情况),您可以在将数据发送到选择列表/下拉列表之前将其降低。遗憾的是你不能在CSS中做到这一点。

答案 9 :(得分:1)

经过大量的研究后,我发现jquery函数/表达式仅以大写字母的形式更改第一个字母中的文本,我相应地修改了该代码,使其适用于输入字段。当您在输入字段中写入内容然后移动到另一个字段或元素时,该字段的文本将仅以第一个字母大小写更改。无论用户输入完整的大小写或大写字母大小的文本:

请遵循以下代码:

步骤1:在html head中调用jquery库:

?

步骤2:编写代码以更改输入字段的文本:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

步骤3:创建在jquery代码中使用相同ID的HTML输入字段,如:

<script>
$(document).ready(function(){
$("#edit-submitted-first-name,#edit-submitted-last-name,#edit-submitted-company-name, #edit-submitted-city").focusout(function(){
var str=$(this).val();
str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
    return letter.toUpperCase();
});
$(this).val(str);
 });});

 </script>

此输入字段的id为:edit-submitted-first-name(在步骤2中使用jquery代码)

**结果: 将焦点从另一个元素的输入字段移开后,确保文本将更改。因为我们在这里使用jquery的焦点事件。 结果应该是这样的:用户类型:&#34;谢谢你&#34;它会随着#34;谢谢你而改变。 **

祝你好运

答案 10 :(得分:1)

我想提出一个纯CSS 解决方案,该解决方案比提出的首字母解决方案更有用,但也非常相似。

.link {
  text-transform: lowercase;
}

.link::first-line {
  text-transform: capitalize;
}
<div class="link">HELLO WORLD!</div>
<p class="link">HELLO WORLD!</p>
<a href="#" class="link">HELLO WORLD!  ( not working )</a>

尽管这仅限于第一行,并且排除了<a>标签,但与 first letter 解决方案相比,它可能对更多用例有用,因为它将大写字母应用于整个行,而不是只有第一个字。 (第一行中的所有单词) 在OP的特定情况下,可以解决此问题。

注意事项:如首字母解决方案注释中所述,CSS规则的顺序很重要!另请注意,我将<a>标签更改为<div>标签,因为由于某些原因,伪元素::first-line不适用于<a>标签,但{{1} }或<div>都可以。

新注释::如果文字自动换行,则会大写,因为实际上它位于第二行(第一行还是可以)。

答案 11 :(得分:0)

后端的PHP解决方案:

$string = `UPPERCASE`
$lowercase = strtolower($string);
echo ucwords($lowercase);

答案 12 :(得分:-1)

我知道这是一个较晚的响应,但是如果您想比较各种解决方案的性能,我有一个我创建的jsPerf。

Regex解决方案无疑是最快的。

这是jsPerf:https://jsperf.com/capitalize-jwaz

有2种正则表达式解决方案。

第一个使用/\b[a-z]/g。单词边界将大写单词,例如“不公开”到“不公开”。

如果只想将大写的字母大写,请使用第二个正则表达式

/(^[a-z]|\s[a-z])/g

答案 13 :(得分:-1)

如果您使用的是jQuery;这是一种实现方法:

$('.link').each(function() {
    $(this).css('text-transform','capitalize').text($(this).text().toLowerCase());
});

以下是做相同事情的更容易阅读的版本:

//Iterate all the elements in jQuery object
$('.link').each(function() {

    //get text from element and make it lower-case
    var string = $(this).text().toLowerCase();

    //set element text to the new string that is lower-case
    $(this).text(string);

    //set the css to capitalize
    $(this).css('text-transform','capitalize');
});

Demo

答案 14 :(得分:-6)

它存在的全部错误 - &gt; font-variant:small-caps;

文本变换:利用;只是第一个字母上限