Skip to content

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

Open
@haizhilin2013

Description

@haizhilin2013

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

Activity

wenyejie

wenyejie commented on May 27, 2019

@wenyejie
.demo {
  text-transform: capitalize;
}
xiangshuo1992

xiangshuo1992 commented on May 27, 2019

@xiangshuo1992
Contributor

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

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

tzjoke commented on May 28, 2019

@tzjoke

补充楼上的:

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

xiangshuo1992 commented on May 28, 2019

@xiangshuo1992
Contributor

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

blueRoach

blueRoach commented on Jul 15, 2020

@blueRoach

text-transform:capitalize;

smile-2008

smile-2008 commented on Oct 13, 2020

@smile-2008

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

smile-2008

smile-2008 commented on Nov 2, 2020

@smile-2008

text-transform:capitalize;

YU-zhao-jun

YU-zhao-jun commented on Nov 26, 2020

@YU-zhao-jun

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

ttop5 commented on Nov 30, 2020

@ttop5
text-transform: capitalize;
CSLukkun

CSLukkun commented on Mar 12, 2021

@CSLukkun

.cap{
text-tansform:capitalize;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@wenyejie@haizhilin2013@ttop5@xiangshuo1992

        Issue actions

          [css] 第41天 怎么让英文单词的首字母大写? · Issue #153 · haizlin/fe-interview