第一个字母大写和其他字母小写在css？ [英] First letter Capitalize and other letters in lower case in css?

问题描述

<p>THIS IS SOMETEXT</p>

我想让它看起来像这是下一个
在CSS中是否可以？

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

编辑：全部

推荐答案

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

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

p { text-transform: capitalize; }

IE4 + 。 这里的示例 。

It's supported in IE4+. Example Here.

16.5大小写：'text-transform'属性

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

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

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

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

---

，大写：

以下是根据此假设：

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

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

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

<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> 元素：

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

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

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

Example Here 。

Example Here.

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

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.

这篇关于第一个字母大写和其他字母小写在css？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！