CSS text-transform字元大小寫轉換

admin發表於2018-10-31
CSSORM字元

text-transform屬性控制文字的大小寫。

對應的指令碼特性為textTransform。

語法結構：

[CSS] 純文字檢視 複製程式碼
text-transform：none | capitalize | uppercase | lowercase | full-width

引數解析:

（1）.none：預設值，無轉換。

（2）.capitalize：將每個單詞的第一個字母轉換成大寫。

（3）.uppercase：將每個單詞轉換成大寫。

（4）.lowercase：將每個單詞轉換成小寫。

（5）.full-width（CSS3）:將所有字元轉換成fullwidth形式。如果字元沒有相應的fullwidth形式，將保留原樣。這個值通常用於排版拉丁字元和數字等表意符號。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>CSS教程</title> 
<style type="text/css"> 
.capitalize .content{text-transform:capitalize;} 
.uppercase .content{text-transform:uppercase} 
.lowercase .content{text-transform:lowercase} 
</style> 
</head> 
<body> 
<div> 
  <ul class="capitalize"> 
    <li class="title">首字母轉換成大寫</li> 
    <li class="content">i am a good boy</li> 
  </ul> 
  <ul class="uppercase"> 
    <li class="title">轉換成大寫</li> 
    <li class="content">i am a good boy</li> 
  </ul> 
  <ul class="lowercase"> 
    <li class="title">轉換成小寫</li> 
    <li class="content">i am A good Boy</li> 
  </ul> 
</div> 
</body> 
</html>

上述程式碼演示了大小寫轉換功能。

相關文章