首字母大写和其他小写字母在css？

Question

<p>THIS IS SOMETEXT</p>

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

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

Answer 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

Answer 2

试试这个：

<style>
p {
    text-transform: lowercase;
}


p:first-letter {
    text-transform: uppercase;
}
</style>

Answer 3

我想通了

p {
    text-transform: lowercase;
}

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