小程序CSS入门

小程序样式课程-第15课-文本-word-spacing字间隔

时间:2019/1/2 15:20:20  作者:互联网  来源:网络转载  查看:25858  评论:0
内容摘要:word-spacing 字间隔基础用法word-spacing 属性可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为 word-spa...

word-spacing 字间隔

基础用法

word-spacing 属性可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。

word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为 word-spacing 设置一个负值,会把它拉近:

p.spread {word-spacing: 30px;}

p.tight {word-spacing: -0.5em;}

 

<p class="spread">

This is a paragraph. The spaces between words will be increased.

</p>

 

<p class="tight">

This is a paragraph. The spaces between words will be decreased.

</p>

可能的值

描述

normal

默认。定义单词间的标准空间。

length

定义单词间的固定空间。

inherit

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

小程序应用

Wxml代码

<view>

This is some text 这里是一些文本。

</view>

<view class='da'>

This is some text 这里是一些文本。

</view>

<view class='xiao'>

This is some text 这里是一些文本。

</view>

Wxss代码

.da{

  word-spacing: 10px;/*增加字(单词)之间*/

}

.xiao{

  word-spacing: -0.5em;/*减少字(单词)之间*/

}

效果如下图

  小程序样式课程-第15课-文本-word-spacing字间隔

欢迎大家支持我的视频课程:微信小程序样式开发入门 
小程序样式课程-第1课-样式基础-元素选择器


相关评论
评论者:      验证码:  点击获取验证码
咨询QQ/微信:45157718 点击这里给我发消息 | 电话:13516821613 | 浙江杭州余杭区东港路118号雷恩科技创新园 | 网站支持:杭州摇亿网络科技 | 浙ICP备06056032号-6 |