CSS3参考手册
»
属性列表
»
文本属性
»
相关内容：
其它文本属性参考
选择其它项
text-transform
版本：CSS1/3
继承性：有
语法：
text-transform
：none | capitalize | uppercase | lowercase |
full-width
默认值
：
none
适用于
：所有元素
继承性
：有
取值：
none：
无转换
capitalize：
将每个单词的第一个字母转换成大写
uppercase：
将每个单词转换成大写
lowercase：
将每个单词转换成小写
full-width：
将所有字符转换成fullwidth形式。如果字符没有相应的fullwidth形式，将保留原样。这个值通常用于排版拉丁字符和数字等表意符号。（CSS3）
说明：
检索或设置对象中的文本的大小写。
对应的脚本特性为
textTransform
。
兼容性：
浅绿
= 支持
红色
= 不支持
墨绿
= 部分支持
橙色
= 实验性质
支持版本
\类型
IE
Firefox
Safari
Chrome
Opera
版本
6-9
#1
4-18
#1
5.1.7
#1
13-23
#1
11.5-12.5
#1
不支持：
full-width
示例：
<!DOCTYPE html> <html lang="zh-cn"> <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> <!--add 2016.4.18 by bottom back to index beging.... --><script>var jump_address="http://www.xwood.net/_site_domain_/_root/5870/5930/5931/6172/7370/index.html";</script><font id="BottomNavBack"></font> <iframe id="NavFrame" name="NavFrame" src="" style="display:none;z-index:-999;height:800px;border:0px;"></iframe> <script type="text/javascript"> function sethash() { document.getElementById("NavFrame").src=jump_address;document.getElementById("BottomNavBack").innerHTML="<a href=\""+jump_address+"\" target=\"_self\"><font color=\"red\">Home Page>></font></a>";hashW = document.documentElement.scrollWidth; document.getElementById("NavFrame").style.display="inline"; document.getElementById("NavFrame").style.width=hashW+"px"; } window.onload = sethash; </script><!-- end --></body> </html>