文字
分享

语法:

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

默认值none

适用于:所有元素

继承性:有

动画性:否

计算值:指定值

取值:

  • none:无转换

  • capitalize:将每个单词的第一个字母转换成大写

  • uppercase:将每个单词转换成大写

  • lowercase:将每个单词转换成小写

  • full-width:将所有字符转换成fullwidth形式。如果字符没有相应的fullwidth形式,将保留原样。这个值通常用于排版拉丁字符和数字等表意符号。(CSS3)

说明:

检索或设置对象中的文本的大小写。
  • 对应的脚本特性为textTransform

兼容性:

ValuesIEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome
Basic Support6.0+2.0+4.0+6.0+15.0+6.0+2.1+18.0+
full-width6.0-11.02.0-18.04.0-45.06.0-8.015.0-29.06.0-8.32.1-4.4.418.0-42.0
19.0+

示例:

实例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

<!DOCTYPE html>

<html lang="zh-cmn-Hans">

<head>

<meta charset="utf-8" />

<title>text-transform_CSS参考手册_web前端开发参考手册系列</title>

<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />

<style>

.capitalize span{text-transform:capitalize;}

.uppercase span{text-transform:uppercase;}

.lowercase span{text-transform:lowercase;}

</style>

</head>

<body>

<ul class="test">

    <li>

        <strong>将每个单词的首字母转换成大写</strong>

        <div>原 文: <span>how do you do.</span></div>

        <div class="capitalize">转换后: <span>how do you do.</span></div>

    </li>

    <li>

        <strong>转换成大写</strong>

        <div>原 文: <span>how do you do.</span></div>

        <div class="uppercase">转换后: <span>how do you do.</span></div>

    </li>

    <li>

        <strong>转换成小写</strong>

        <div>原 文: <span>HOW ARE YOU.</span></div>

        <div class="lowercase">转换后: <span>HOW ARE YOU.</span></div>

    </li>

</ul>

</body>

</html>

            


运行实例 »

点击 "运行实例" 按钮查看在线实例


上一篇:文本下一篇:white-space