CSS text-transform 充分利用所有大写字母答案

【问题标题】：CSS text-transform capitalize on all capsCSS text-transform 充分利用所有大写字母
【发布时间】：2010-08-12 19:14:30
【问题描述】：

这是我的 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

有什么想法吗？

【问题讨论】：

@Marcel - 不需要，它后面跟着一个空格，所以它是一个完全有效的文字 & 符号（除非文档是 XHTML，但没有建议是）
@David – 哦，我不知道这也是一个有效的符号。谢谢，总有新东西要学。

标签： css

【解决方案1】：

你可以几乎做到这一点：

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

它会给你输出：

Small Caps
All Caps

【讨论】：

它就像一个魅力，谢谢！，顺序很重要，带有 :first-letters 的行必须在小写行之后。
这似乎要求 .link 元素显示为块元素。 (display:inline-block;) jsfiddle.net/7y7wqqhb/1
聪明的想法，干得好Philihp。做得好托林指出“显示：内联块”。
但它不会产生预期的结果。只有当问题要求将每个单词的第一个字母大写时，它才会将元素的第一个字母大写。它产生“全部大写”，但要求是“全部大写”
@manpreetsingh 正确，这就是为什么我说它几乎有效。这可能不是问题所要求的，但您的规范通常是灵活的，更简单的解决方案更可取。

【解决方案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();

【讨论】：

是的，这可能是唯一的方法。
用正则表达式代替循环+子字符串可能会更好——但是你怎么能在 Javascript 的正则表达式中大写字母呢？
如果你要在服务器端做，你可以把整个字符串小写，然后让 CSS 做大写。只是一个想法。
我最终对整个字符串做了一个 .toLowerCase() ，然后使用 CSS 大写。感谢您的建议！
@GlennFerrie 如果您不介意与我们分享，您所说的唯一 CSS 解决方案是什么？ :-)

【解决方案3】：

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

【讨论】：

是的。我对模型中的项目进行了迭代，并将它们转换为LowerCase，比如myArray[i].firstName = myArray[i]firstName.toLowerCase() 然后在css中，text-transform: capitalize
OP没有提到JS。
感谢您的输入，但问题并不仅限于 CSS。
您能否删除@JDuarteDJ 的反对票？同样，我的回答是根据所质疑的。如果您看到选择作为答案的内容也使用 JavaScript，甚至是 jQuery。谢谢。

【解决方案4】：

有趣的问题！

capitalize 将单词的每个首字母转换为大写，但它不将其他字母转换为小写。甚至:first-letter 伪类也不会删除它（因为它适用于每个元素的第一个字母，而不是每个单词），而且我看不到一种组合小写和大写来获得预期结果的方法。

据我所知，这确实是用 CSS 做不到的。

@Harmen 在他的回答中展示了好看的 PHP 和 jQuery 变通方法。

【讨论】：

奇怪，我希望添加 'a {text-transform:lowercase}' 会起作用。但事实并非如此。
这个答案回答了为什么会这样。 :) 这比解决方案要好。
很好的解释@Pekka 웃 来自 CSS 的一些意外行为。让我们希望有一个更正的管道。
@Pekka 웃 我提供的答案确实非常接近于纯粹在 CSS 中执行此操作。每行有一次限制，但我认为它适合大多数情况。

【解决方案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 的具体情况下，这可能已经解决了。

注意事项：在首字母解决方案cmets中提到，CSS规则的顺序很重要！另请注意，我将<a> 标记更改为<div> 标记，因为由于某种原因，伪元素::first-line 不适用于<a> 标签本机，但<div> 或<p> 很好。 编辑：如果将display: inline-block; 添加到.link 类，<a> 元素将起作用。感谢 Dave Land 发现这一点！

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

【讨论】：

您的( not working ) 示例可以通过将display: inline-block; 添加到.link 样式来实现。
在所有字母最初都大写的情况下通过 css 解决方案

【解决方案6】：

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“最终做了什么”（这对我来说更干净而且对我有用）在标记为答案的帖子的 cmets 中。

【讨论】：

【解决方案7】：

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

【讨论】：

这个答案并不具有建设性，尽管事实上它解释了为什么 OP 有这个问题。
@JDuarteDJ 我认为了解源问题很重要，事实就是如此。 captialize 不规范化字符串，而只获取第一项并将其转换为大写字母。我发现这些信息确实有用

【解决方案8】：

您可以使用 css 首字母来做到这一点！例如，我想要它用于菜单：

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

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

【讨论】：

这不是 OP 要求的，它不是小型大写字母。

【解决方案9】：

可能对 java 和 jstl 有用。

使用本地化消息初始化变量。
之后就可以在jstl toLowerCase函数中使用了。
使用 CSS 进行转换。

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

【讨论】：

就我而言，我可以直接使用${fn:toLowerCase(some.key)}，而不必使用fmt:message。谢谢。

【解决方案10】：

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

【讨论】：

【解决方案11】：

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

按照此代码：

Step-1：在 html head 中调用 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是：edit-submitted-first-name（在步骤2的jquery代码中使用）

**结果：确保将焦点从另一个元素的输入字段移开后，文本会发生变化。因为我们在这里使用 jquery 的焦点事件。结果应该是这样的：用户类型：“谢谢”它会变成“谢谢”。 **

祝你好运

【讨论】：

【解决方案12】：

PHP 解决方案，在后端：

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

【讨论】：

【解决方案13】：

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

Regex 解决方案肯定是最快的。

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

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

第一个使用/\b[a-z]/g。单词边界将大写单词，例如 non-disclosure 到 Non-Disclosure。

如果您只想将前面有空格的字母大写，请使用第二个正则表达式

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

【讨论】：

【解决方案14】：

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

【讨论】：

我不认为 OP 使用 jQuery。

【解决方案15】：

确实存在所有错误 --> font-variant: small-caps;

文本转换：大写；只是第一个字母大写

【讨论】：

这根本不是 OP 想要的。他希望输出只有单词的首字母大写。不是整个字符串。
您没有察觉到的问题存在细微差别：text-transform: capitalize; 不会更改已经全部大写的文本。再次查看问题：用户已经尝试过了。
然后可以使用span标签来分解他们想要所有大写和小写的单词。