CSS文本转换全部大写

对于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();​

你可以 几乎 用:

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

它将为您提供输出:

Small caps
All caps

有趣的问题!

capitalize 将单词的每个第一个字母都转换为大写,但确实如此 不 将其他字母转换为小写。甚至不 :first-letter 伪类将剪切它(因为它应用于每个元素的第一个字母,而不是每个单词),我看不到将小写字母和大写字母组合以获得所需结果的方法。

据我所知,这确实不可能用CSS来完成。

@Harmen的答案中显示了漂亮的PHP和jquery解决方案。

使用javascript转换 .toLowerCase() 和 capitalize 剩下的就做了。

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; }

汗“最终做了什么”(更干净,为我工作)写在被标记为答案的帖子的评论中。

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

可能对Java和JSTL很有用。

1. 用本地化消息初始化变量。
2. 之后,可以在jstl-tolowercase函数中使用它。
3. 用CSS转换。

在JSP中

1。

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

2。

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

在CSS中

三。

.content {
  text-transform:capitalize;
}

你可以用CSS的第一个字母! 我要它做菜单:

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

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

如果数据来自数据库,就像我的例子一样,您可以在发送到选择列表/下拉列表之前降低它。很遗憾你不能用CSS来完成。

在研究了很多之后,我发现jquery函数/表达式只改变了大写的第一个字母中的文本,我相应地修改了代码,使其对输入字段有效。当您将在输入字段中写入某些内容,然后移动到另一个文件或元素时,该字段的文本将只更改为第一个字母大写。无论用户键入大小写完全相同的文本:

请遵循以下代码:

步骤1:在HTML头中调用jquery库:

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

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

<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>

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

<input type="text" id="edit-submitted-first-name" name="field name">

此输入字段的ID为:编辑提交的名字(在步骤2的jquery代码中使用)

**结果: 确保在将焦点从另一个元素的输入字段移动后,文本将发生更改。因为我们在这里使用jquery的focus out事件。 结果应该是这样的:用户类型:“谢谢”,它将更改为“谢谢”。 **

祝你好运

我建议 纯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> 标记它对于更多的用例可能比 第一封信 解决方案,因为它对整行应用大写,而不仅仅是第一个字。(第一行中的所有单词) 在OP的具体案例中,这本可以解决它。

笔记: 如中所述 第一封信 解决方案注释,CSS规则的顺序很重要!还请注意,我更改了 <A & GT; A标签 <div> 标记,因为出于某种原因 ::first-line 不适用于 <A & GT; 但标签 <DIV & GT; 或 <p> 很好。

新注意事项: 如果 文本包装 它将失去资本化,因为它现在实际上在第二行(第一行仍然可以)。

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

当然,Regex解决方案是最快的。

以下是JSPERF: https://jsperf.com/capitalize-jwaz

有2个regex解决方案。

第一个使用 /\b[a-z]/g . 单词边界将大写单词,如不披露到不披露。

如果只想将前面有空格的字母大写,则使用第二个regex

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

如果您使用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

它确实存在所有错误-->字体变体:小写;

文本转换:大写;仅首字母大写