• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • text-transform

    text-transform CSS属性指定如何将元素的文本大写。它可以用于使文本显示为全大写或全小写,也可单独对每一个单词进行操作。

    示例

    /* Keyword values */
    text-transform: capitalize;
    text-transform: uppercase;
    text-transform: lowercase;
    text-transform: none;
    text-transform: full-width;
    
    /* Global values */
    text-transform: inherit;
    text-transform: initial;
    text-transform: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE10以上版本浏览器支持text-transform

    语法:

    text-transform:none| capitalize| uppercase| lowercase| full-width

    取值:

    • none:无转换
    • capitalize:将每个单词的第一个字母转换成大写
    • uppercase:将每个单词转换成大写
    • lowercase:将每个单词转换成小写
    • full-width:将所有字符转换成fullwidth形式。如果字符没有相应的fullwidth形式,将保留原样。这个值通常用于排版拉丁字符和数字等表意符号。(CSS3)

    说明:

    检索或设置对象中的文本的大小写。

    • 对应的脚本特性为textTransform

    text-transform属性考虑特定于语言的案例映射规则,如:

    • 在突厥语中,例如土耳其语(tr),阿塞拜疆语(az),克里米亚Ta语(crh),伏尔加语tar(tt)和巴什基尔语(ba),有两种i,带和不带点,以及两种大小写对: i/İ和ı/ I。
    • 在德语(de)中,ß变为 SS 大写。
    • 在荷兰语(nl)中,有 ij 向图变为 IJ,即使带有 text-transform: capitalize,也仅将单词的首字母大写。
    • 在希腊文(el)中,当整个单词为大写(ά/Α)时,元音会失去重音,但析取式(ή/Ή)除外。另外,在第一个元音上带有重音的双音会丢失该重音,而在第二个元音(άι/ΑΪ)上具有变音符号。
    • 在希腊文(el)中,小写的sigma字符有两种形式:σ和ς。ς仅在sigma终止单词时使用。当应用于 text-transform: lowercase 大写sigma(Σ)时,浏览器需要根据上下文选择正确的小写形式。

    在其他一些其他特定的情况下,映射规则不被任何浏览器考虑在内:

    • 在Gaelic(ga)中,当基本首字母大写时,前缀字母保留为小写,因此在此示例中, h-不应将其大写:应 text-transform: uppercase 更改 Meud na h-aplacaid 为 MEUD NA H-APLACAID 违反区域拼字法则的规则 MEUD NA h-APLACAID.语言由 lang HTML属性或 xml:lang XML属性定义。
      • 默认值none
        适用于所有元素
        继承性
        动画性
        计算值指定值

        实例

        h1{text-transform:uppercase;}
        h2{text-transform:capitalize;}
        p{text-transform:lowercase;}
        

        首字母大写(标点)

        <p>Initial String <strong>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</strong> </p>
        <p>text-transform: capitalize <strong><span>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</span></strong> </p>
        
        //CSS
        span {
          text-transform: capitalize;
        }
        strong { float: right; }
        

        初始字符串 Lorem ipsum dolor sit amet, consectetur adipisicing elit,...

        文本转换:大写 Lorem ipsum dolor sit amet, consectetur adipisicing elit,...

        首字母大写(符号)

        <p>Initial String <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong> </p>
        <p>text-transform: capitalize <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong></p>
        
        span{text-transform: capitalize;}
        strong { float: right; }
        

        初始字符串ⓐⓑⓒ(ⓓⓔⓕ)—ⓖⓗⓘ—ⓙkl

        文本转换:大写ⓐⓑⓒ(ⓓⓔⓕ)—ⓖⓗⓘ—ⓙkl

    下篇:text-overflow