位置:电子教程 > 微信小程序设计教程 (如果看不到内容请使用360浏览器) 推荐学习资源
小程序样式基础
框模型
定位
选择器
当前阅读教程:微信小程序设计教程 > 字符转换(text-transform)
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 文本阴影(text-shadow) 下一篇: 处理空白符(white-space)

1.基础语法

text-transform 属性处理文本的大小写。

属性值如下:

描述

none

默认。定义带有小写字母和大写字母的标准的文本。

capitalize

文本中的每个单词以大写字母开头。

uppercase

定义仅有大写字母。

lowercase

定义无大写字母,仅有小写字母。

inherit

规定应该从父元素继承 text-transform 属性的值。

       作为一个属性,text-transform 可能无关紧要,不过如果你突然决定把所有 h1 元素变为大写,这个属性就很有用。不必单独地修改所有 h1 元素的内容,只需使用 text-transform 为你完成这个修改,代码示例

小白教程网www.2d5.net

如下:

h1 {text-transform: uppercase}

使用 text-transform 有两方面的好处。首先,只需写一个简单的规则来完成这个修改,而无需修改 h1 元素本身。其次,如果你以后决定将所有大小写再切换为原来的大小写,可以更容易地完成修改。

2.小程序应用

根据基础的语法,下面在微信小程序中实现字符的大小写转换。

.wxml文件代码示例

小白教程网www.2d5.net

如下:

<view> <!--通过样式转换成全部大写-->
huang ju HUA
</view>
 
<view> <!--通过样式转换成全部小写-->
huang ju HUA
</view>
 
<view> <!--通过样式转换成单词首字母大写-->
huang ju HUA
</view>

.wxss文件代码示例

小白教程网www.2d5.net

如下:

.cls1{
   text-transform: uppercase;/*大写*/
}
.cls2{
   text-transform:lowercase;/*小写*/
}
.cls3{
   text-transform: capitalize;/*首字母大写开头*/
}

效果如图3-12所示

image.png



上一篇: 文本阴影(text-shadow) 下一篇: 处理空白符(white-space)
毕业设计网             广告联系QQ:45157718(微信同号)