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

Question

<p>THIS IS SOMETEXT</p>

我想让它看起来像This is sometext段落的第一个字母是大写的.
CSS中有可能吗？

编辑:我的所有文字都是大写字母.

Answer 1

您可以使用text-transform以使段落的每个单词大写,如下所示:

p { text-transform: capitalize; }

它在IE4 +中得到支持.这里的例子.

16.5资本化:'文本转换'属性

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

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      */
}

这里的例子.

或者,您可以使用JavaScript通过<span>元素包装每个单词:

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

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

这里的例子.

制作大写文本的第一个字母,大写:

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

p { text-transform: lowercase; }

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

这里的例子.

Answer 2

试试这个 :

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


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