微信小程序样式入门到精通(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