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

问题描述

<p>THIS IS SOMETEXT</p>

我想让它看起来像 This is sometext 段落的第一个字母是大写的.
在 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?

我所有的文字都是大写的.

All my text is in capital letters.

推荐答案

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

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

p { text-transform: capitalize; }

IE4+ 支持.示例.

16.5 大写:'text-transform' 属性强>

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

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

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

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

<小时>

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

以下是在这个假设下:

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

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

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

示例.

或者，您可以使用 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(" ");
});

示例.

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

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;
}

示例.

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