位置:电子教程 > 微信小程序设计教程 (如果看不到内容请使用360浏览器) 推荐学习资源
小程序样式基础
框模型
定位
选择器
当前阅读教程:微信小程序设计教程 > 字母间隔(letter-spacing)
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 单词间隔(word-spacing) 下一篇: 文本方向(direction)

1.基础语法

letter-spacing 属性与 word-spacing 的区别在于,字母间隔修改的是字符或字母之间的间隔。

注释:允许使用负值,这会让字母之间挤得更紧。

word-spacing 属性一样,letter-spacing 属性的可取值包括所有长度。默认关键字是 normal(这与 letter-spacing:0 相同)。输入的长度值会使字母之间的间隔增加或减少指定的量,代码示例

小白教程网www.2d5.net

如下:

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
 
<h1>This is header 1</h1>
<h4>This is header 4</h4>

属性值说明如下:

描述

normal

默认。规定字符间没有额外的空间。

length

定义字符间的固定空间(允许使用负值)。

inherit

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

2.小程序应用

根据基础的语法,下面在微信小程序中实现定义文本字之间的间隔。

.wxml文件代码示例

小白教程网www.2d5.net

如下:

<view>
This is some text。 这里是一些文本。
</view>
<view>
This is some text。 这里是一些文本。
</view>
<view>
This is some text。 这里是一些文本。
</view>

.wxss文件代码代码示例

小白教程网www.2d5.net

如下

.da{
 letter-spacing: 5px;/*增加字符间之空间*/
}
.xiao{
 letter-spacing: -0.3em;/*减少字符间之空间*/
}

效果如图3-15所示

image.png



上一篇: 单词间隔(word-spacing) 下一篇: 文本方向(direction)
毕业设计网             广告联系QQ:45157718(微信同号)