<p>THIS IS SOMETEXT</p>
我想让它看起来像This is sometext
,该段的第一个字母是大写的。
在CSS中有可能吗?
编辑:我所有的文字都是大写字母。
发布于 2014-03-21 18:15:05
您可以使用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 */
}
或者,您可以使用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;
}
发布于 2015-03-19 09:07:57
试试这个:
p {
text-transform: lowercase;
}
p:first-letter {
text-transform: uppercase;
}
备注
文本的父级需要具有block
或inline-block
的样式,否则就无法工作。
发布于 2014-03-21 18:26:24
我想出来了
p {
text-transform: lowercase;
}
p:first-letter {
text-transform: uppercase;
}
https://stackoverflow.com/questions/22566468
复制相似问题