Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css] 第41天 怎么让英文单词的首字母大写? #153

Open
haizhilin2013 opened this issue May 26, 2019 · 10 comments
Open

[css] 第41天 怎么让英文单词的首字母大写? #153

haizhilin2013 opened this issue May 26, 2019 · 10 comments
Labels
css css

Comments

@haizhilin2013
Copy link
Collaborator

第41天 怎么让英文单词的首字母大写?

@haizhilin2013 haizhilin2013 added the css css label May 26, 2019
@wenyejie
Copy link

.demo {
  text-transform: capitalize;
}

@xiangshuo1992
Copy link
Contributor

xiangshuo1992 commented May 27, 2019

楼上用的没问题,学习嘛,那我就来扩展一下。

text-transform 属性控制文本的大小写,是CSS2.1的属性,兼容性问题不大。
属性值是关键字,有4+1种,这个1是实验性属性值。

/* Keyword values */
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;
text-transform: full-width;

capitalize
这个关键字强制每个单词的首字母转换为大写。

uppercase
这个关键字强制所有字符被转换为大写。

lowercase
这个关键字强制所有字符被转换为小写。

none
这个关键字阻止所有字符的大小写被转换。

full-width (实验性属性值)
这个关键字强制字符 — 主要是表意字符和拉丁文字 — 书写进一个方形里,并允许它们按照一般的东亚文字(比如中文或日文)对齐。

除了以上,还有一些基本上不会用到的默认值等,就不多说了。

/* Global values */
text-transform: inherit;
text-transform: initial;
text-transform: unset;

@tzjoke
Copy link

tzjoke commented May 28, 2019

补充楼上的:

.demo::first-letter {
    text-transform: uppercase;
}

@xiangshuo1992
Copy link
Contributor

@tzjoke 你这个是第一行文字的第一个字母大写。
你是要补充这种用法吗?

@blueRoach
Copy link

text-transform:capitalize;

@MrZ2019
Copy link

MrZ2019 commented Oct 13, 2020

.demo::first-letter {
text-transform: uppercase;
}

@MrZ2019
Copy link

MrZ2019 commented Nov 2, 2020

text-transform:capitalize;

@YU-zhao-jun
Copy link

function test(str){
const a = str.split(" ").map(item=>item[0].toUpperCase()+item.substring(1)).join(" ")
return a
}
document.write(test("a23 b23 ccc2123 1"));

@ttop5
Copy link

ttop5 commented Nov 30, 2020

text-transform: capitalize;

@CSLukkun
Copy link

.cap{
text-tansform:capitalize;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css css
Projects
None yet
Development

No branches or pull requests

9 participants