首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >第一个字母大写和其他字母在css小写?

第一个字母大写和其他字母在css小写?
EN

Stack Overflow用户
提问于 2014-03-21 18:13:39
回答 3查看 47.8K关注 0票数 19
代码语言:javascript
运行
复制
<p>THIS IS SOMETEXT</p>

我想让它看起来像This is sometext,该段的第一个字母是大写的。

在CSS中有可能吗?

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

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2014-03-21 18:15:05

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

代码语言:javascript
运行
复制
p { text-transform: capitalize; }

它在IE4+中得到支持。Example Here

16.5 Capitalization: the 'text-transform' property 此属性控制元素文本的大写效果。 capitalize将每个单词的第一个字符放在大写;其他字符不受影响。

大写的,大写的,大写的:

以下是根据这一假设作出的:

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

必须用包装器元素(如<span> )包装每个单词,并使用:first-letter伪元素来转换每个单词的第一个字母:

代码语言:javascript
运行
复制
<p>
  <span>THIS</span> <span>IS</span> <span>SOMETEXT</span>
</p>
代码语言:javascript
运行
复制
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>元素包装每个单词:

代码语言:javascript
运行
复制
var words = $("p").text().split(" ");
$("p").empty();

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

Example Here

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

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

代码语言:javascript
运行
复制
p { text-transform: lowercase; }

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

Example Here

票数 45
EN

Stack Overflow用户

发布于 2015-03-19 09:07:57

试试这个:

代码语言:javascript
运行
复制
p {
  text-transform: lowercase;
}

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

备注

文本的父级需要具有blockinline-block的样式,否则就无法工作。

票数 19
EN

Stack Overflow用户

发布于 2014-03-21 18:26:24

我想出来了

代码语言:javascript
运行
复制
p {
    text-transform: lowercase;
}

p:first-letter {
    text-transform: uppercase;
}
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/22566468

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档