微信小程序樣式入門到精通(wxss)課程012-文本-text-transform字符轉換

基礎用法

text-transform 屬性處理文本的大小寫。

這個屬性有 4 個值：none | uppercase | lowercase | capitalize

做爲一個屬性，text-transform 可能可有可無，不過若是您忽然決定把全部 h1 元素變爲大寫，這個屬性就頗有用。沒必要單獨地修改全部 h1 元素的內容，只需使用 text-transform 爲你完成這個修改：

h1 {text-transform: uppercase}複製代碼

使用 text-transform 有兩方面的好處。首先，只需寫一個簡單的規則來完成這個修改，而無需修改 h1 元素自己。其次，若是您之後決定將全部大小寫再切換爲原來的大小寫，能夠更容易地完成修改。

屬性值以下

值	描述
none	默認。定義帶有小寫字母和大寫字母的標準的文本。
capitalize	文本中的每一個單詞以大寫字母開頭。
uppercase	定義僅有大寫字母。
lowercase	定義無大寫字母，僅有小寫字母。
inherit	規定應該從父元素繼承 text-transform 屬性的值。

小程序應用

Wxml代碼

<view class='cls1'>

huang ju HUA

</view>

 

<view class='cls2'>

huang ju HUA

</view>

 

<view class='cls3'>

huang ju HUA

</view>複製代碼

Wxss代碼

.cls1{

  
text-transform: uppercase;/*大寫*/

}

.cls2{

  
text-transform:lowercase;/*小寫*/

}

.cls3{

  
text-transform: capitalize;/*首字母大寫開頭*/

}複製代碼

效果以下圖

微信小程序交流羣：111733917 

歡迎你們收看個人：微信小程序樣式入門到精通(wxss,css)視頻課程 https://ke.qq.com/course/368613?tuin=2b10d56