CSS css中的第一个字母大写和其他小写字母？

First letter Capitalize and other letters in lower case in css?

提问by user2736812

<p>THIS IS SOMETEXT</p>

I want to make it look like This is sometextwhich the first letter of the paragraph is uppercase.
Is it possible in CSS?

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

Edit:All my text is in capital letters.

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

回答by Hashem Qolami

You could use text-transformin order to make each word of a paragraph capitalized, as follows:

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

p { text-transform: capitalize; }

It's supported in IE4+. Example Here.

它在IE4+ 中受支持。示例在这里。

16.5 Capitalization: the 'text-transform' property

This property controls capitalization effects of an element's text.

capitalizePuts the first character of each word in uppercase; other characters are unaffected.

16.5 大写：'text-transform' 属性

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

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

---

---

Making each word of an uppercase text, capitalized:

使大写文本的每个单词大写：

The following was under this assumption:

以下是在这个假设下：

I want to make it look like: This Is Sometext

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

You have to wrap each word by a wrapper element like <span>and use :first-letterpseudo element in order to transform the first letter of each word:

你必须用一个包装元素来包装每个单词，<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.

示例在这里。

Alternatively, you could use JavaScript to wrap each word by a <span>element:

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

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

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

Example Here.

示例在这里。

---

---

Making the first letter of an uppercase text, capitalized:

使大写文本的第一个字母大写：

This seems to be what you are really looking for, that's pretty simple, all you need to do is making all words lowercase and then transforming the first letter of the paragraph to uppercase:

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

p { text-transform: lowercase; }

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

Example Here.

示例在这里。

回答by Subeesh

Try This :

尝试这个 ：

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


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

回答by user2736812

I figured it out

我想到了

p {
    text-transform: lowercase;
}

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