css中第一个字母大写和其他小写字母？答案

【问题标题】：First letter Capitalize and other letters in lower case in css?css中第一个字母大写和其他小写字母？
【发布时间】：2014-03-21 18:13:39
【问题描述】：

<p>THIS IS SOMETEXT</p>

我想让它看起来像This is sometext，其中段落的第一个字母是大写的。
在 CSS 中可以吗？

编辑：我所有的文字都是大写的。

【问题讨论】：

投资组合这工作正常..

标签： css text

【解决方案1】：

您可以使用text-transform 将段落的每个单词都大写，如下所示：

p { text-transform: capitalize; }

IE4+ 支持它。 Example Here。

16.5 Capitalization: the 'text-transform' property

此属性控制元素文本的大写效果。

capitalize 将每个单词的第一个字符大写；其他字符不受影响。

将每个单词的大写字母大写：

以下是在这个假设下：

我想让它看起来像：This Is Sometext

您必须用 <span> 之类的包装元素包装每个单词，并使用 :first-letter 伪元素来转换每个单词的第一个字母：

<p>
  <span>THIS</span> <span>IS</span> <span>SOMETEXT</span>
</p>

p { text-transform: lowercase; }    /* Make all letters lowercase */
p > span { display: inline-block; } /* :first-letter is applicable to blocks */

p > span:first-letter {
  text-transform: uppercase;        /* Make the first letters uppercase      */
}

Example Here.

或者，您可以使用 JavaScript 用 <span> 元素包装每个单词：

var words = $("p").text().split(" ");
$("p").empty();

$.each(words, function(i, v) {
    $("p").append($("<span>").text(v)).append(" ");
});

Example Here.

将大写文本的首字母大写：

这似乎是你真正要找的，这很简单，你需要做的就是将所有单词变成小写，然后将段落的第一个字母转换为大写：

p { text-transform: lowercase; }

p:first-letter {
  text-transform: uppercase;
}

Example Here.

【讨论】：

但我所有的文字都是大写的
您好像误解了这个问题。我认为OP想将THIS IS SOMETEXT转换为This is Sometext
不确定 OP 是否需要 This is Sometext 或 This is sometext，因为他提供了以下解决方案。但是，为您的努力 +1 :)
是的，OP 的“答案”提供了一个不同的解决方案，这个问题问 LOL。
如果尝试使用 span 执行此操作，请使用 display: inline-block

【解决方案2】：

试试这个：

p {
  text-transform: lowercase;
}

p:first-letter {
  text-transform: uppercase;
}

注意

文本的父级需要具有block 或inline-block 的样式，否则将不起作用。

【讨论】：

对于任何想要使用伪元素的人 :first-letter 考虑文本的父级应该有样式块或内联块，我的文本在 span 元素中，我想知道为什么它不起作用！现在你知道了；）

【解决方案3】：

我想通了

p {
    text-transform: lowercase;
}

p:first-letter {
    text-transform: uppercase;
}

【讨论】：

这是@Tamil Selvan 提供的确切答案，由于您的评论而被删除。